이번에는 vue-cli에서 lib-flexible+rem 모바일 적응을 구성하는 방법을 보여 드리겠습니다. vue-cli에서 lib-flexible+rem 모바일 적응을 구성할 때 다음은 실제 사례입니다. 일어나서 살펴보세요.
유연하게 설치
npm install lib-flexible --save
유연성 소개
유연한import 'lib-flexible'
px를 rem으로
webpack의 px2rem-loader를 사용하여 px를 rem으로 자동 변환하세요 px2rem-loadernpm install px2rem-loader --save-dev
px2rem 사용법
px2rem을 설치한 후 px를 사용할 때 몇 가지 차이점이 있습니다. 아래에 간략하게 소개된 px2rem의 공식 소개를 참고하시면 됩니다. px를 직접 작성하면 컴파일 후 바로 rem으로 변환됩니다 ---- 다음 두 가지 상황을 제외하고는 다른 길이로 사용하세요 px 뒤에 /*no*/를 추가하면 px가 변환되지 않고 그대로 출력됩니다. ---일반 국경에서는 이것을 사용해야 합니다px 뒤에 /*px*/를 추가하면 다른 dpr에 따라 세 가지 코드 세트가 생성됩니다. ----일반 글꼴은 이것을 사용해야 합니다
샘플 코드
컴파일 전 (직접 작성한 코드)
.selector { width: 150px; height: 64px; /*px*/ font-size: 28px; /*px*/ border: 1px solid #ddd; /*no*/ }
.selector { width: 2rem; border: 1px solid #ddd; } [data-dpr="1"] .selector { height: 32px; font-size: 14px; } [data-dpr="2"] .selector { height: 64px; font-size: 28px; } [data-dpr="3"] .selector { height: 96px; font-size: 42px; }
주의: 함정
index.html의 헤드에 viewport
라는 메타 태그를 추가할 수 없습니다. 유연한 기능이 자동으로 추가해 줍니다!업데이트: 외부에서 CSS를 도입할 때 문제는 px2rem이 rem
을 변환할 수 있는지 여부입니다. 2017.12.8 업데이트: 실제 응용 프로그램에서 px2rem이 외부에서 가져온 CSS 파일을 정상적으로 변환할 수 있지만 때로는 변환할 수 없는 경우가 있는 것으로 나타났습니다. 이유는 무엇입니까? CSS를 도입하는 세 가지 방법을 테스트해본 결과 첫 번째는 정상적으로 변환이 되지만, 두 번째와 세 번째는 정상적으로 변환이 되지 않는 것을 발견했습니다. 그 이유는 제가 지식이 부족해서 아직도 이해가 되지 않습니다. 세 가지 도입 방식의 차이점을 마스터에게 설명해달라고 요청하세요. 이러한 방법을 이해한다면 cssLoader의 importLoaders를 구성할 필요가 없습니다. 다음 방법은 외부에서 가져온 CSS를 rem으로 변환해야 하는지 여부를 제어하는 것이 더 쉽기 때문입니다. 그러나 importLoaders를 변경하면 이를 제어할 수 없으므로 강제로 변환됩니다..
<style src='../assets/style.css'> /* px2rem能正常转换 */ </style> <style> /* px2rem不能正常转换 */ @import '../assets/style.css'; </style> <style> /* px2rem不能正常转换 */ @import url('../assets/style.css'); </style>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
vue-cli 사용법에 대한 자세한 설명Vue 템플릿 파일 패키징 및 구성 단계에 대한 자세한 설명
위 내용은 vue-cli에서 lib-flexible+rem 모바일 적응을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!