vue-cli에서 lib-flexible+rem 모바일 적응을 구성하는 방법

이번에는 vue-cli에서 lib-flexible+rem 모바일 적응을 구성하는 방법을 보여 드리겠습니다. vue-cli에서 lib-flexible+rem 모바일 적응을 구성할 때 다음은 실제 사례입니다. 일어나서 살펴보세요.

유연하게 설치

npm install lib-flexible --save

유연성 소개

유연한

import 'lib-flexible'

을 도입하려면 프로젝트 항목 파일main.js에 다음 코드를 추가하세요.

px를 rem으로

webpack의 px2rem-loader를 사용하여 px를 rem으로 자동 변환하세요

px2rem-loader

npm 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;
}

프로젝트를 다시 시작하면 디자인 초안에 px를 자유롭게 사용할 수 있습니다.

주의: 함정

index.html의 헤드에 viewport

라는 메타 태그를 추가할 수 없습니다. 유연한 기능이 자동으로 추가해 줍니다!

업데이트: 외부에서 CSS를 도입할 때 문제는 px2rem이 rem

을 변환할 수 있는지 여부입니다. 2017.12.8 업데이트: 실제 응용 프로그램에서 px2rem이 외부에서 가져온 CSS 파일을 정상적으로 변환할 수 있지만 때로는 변환할 수 없는 경우가 있는 것으로 나타났습니다. 이유는 무엇입니까? CSS를 도입하는 세 가지 방법을 테스트해본 결과 첫 번째는 정상적으로 변환이 되지만, 두 번째와 세 번째는 정상적으로 변환이 되지 않는 것을 발견했습니다. 그 이유는 제가 지식이 부족해서 아직도 이해가 되지 않습니다. 세 가지 도입 방식의 차이점을 마스터에게 설명해달라고 요청하세요.

이러한 방법을 이해한다면 cssLoader의 importLoaders를 구성할 필요가 없습니다. 다음 방법은 외부에서 가져온 CSS를 rem으로 변환해야 하는지 여부를 제어하는 ​​것이 더 쉽기 때문입니다. 그러나 importLoaders를 변경하면 이를 제어할 수 없으므로 강제로 변환됩니다.

.

<style src=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

vue-cli 사용법에 대한 자세한 설명

Vue 템플릿 파일 패키징 및 구성 단계에 대한 자세한 설명

JS는 이미지 스트레칭을 어떻게 방지합니까?

위 내용은 vue-cli에서 lib-flexible+rem 모바일 적응을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!