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

다음 vue.js 칼럼에서는 유연성보다는 기본 모바일 솔루션인 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

를 지원합니다. 관련 권장 사항:

2020년 프론트엔드 vue 인터뷰 질문 큰 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 교육을 방문하세요! !

위 내용은 vue-cli 프로젝트에서 vw 장치를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!