vue-cli 프로젝트에서 vw 장치를 사용하는 방법은 무엇입니까?-View.js-php.cn

vue-cli 프로젝트에서 vw 장치를 사용하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2020-11-17 17:58:16

앞으로

2393명이 탐색했습니다.

다음 vue.js 칼럼에서는 유연성보다는 기본 모바일 솔루션인 vue-cli 프로젝트에서 vw를 사용하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue-cli 프로젝트에서 vw 장치를 사용하는 방법은 무엇입니까?

Installation
명령줄 입력:

yarn add postcss-px-to-viewport

로그인 후 복사

또는

npm i postcss-px-to-viewport -save -dev

로그인 후 복사

구성
package.json, postcss에 코드 추가:

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},

로그인 후 복사

구성 항목:
"viewportWidth": 750, / /디자인 초안의 너비
"unitPrecision": 3, //px를 vw로 변환한 후 소수점을 유지하는 자릿수 및 vh
"minPixelValue": 1, //변환되지 않는 최소 px 값 vw

사용 시나리오

vw 및 vh는 특정 너비(750px임을 기억) 이하의 장치 픽셀만 rem으로 변환하는 유연한 것과 달리 PC와 모바일 단말기 모두에 효과를 생성하므로 디자인 초안이 모바일 단말기용이므로 vw 장치를 사용할 수 있는 모든 권한이 있습니다. 이로 인해 PC 측에서 페이지 글꼴이 너무 커지게 되므로 애플리케이션 시나리오에 따라 적절하게 처리하고 선택해야 합니다. -cli3.0은 lib-flexible/px2rem을 도입합니다

compatibility

vw/vh 유닛은 실제로 더 일찍 등장했습니다. 예, 하지만 이전에는 지원이 별로 좋지 않았습니다. 지금은 브라우저가 발전하면서 대부분의(92% 이상) 브라우저가 그렇습니다. 이미 vw/vh