** vw/vh**
vw는 상대적인 단위로, 1vw는 화면 너비의 1%를 나타냅니다. 이를 기준으로 화면 크기에 비례하여 크기를 조정해야 하는 모든 요소의 단위로 vw를 사용할 수 있습니다. 크기를 조정할 필요가 없는 요소는 px를 사용합니다.
vw/vh 적응은 일반적으로 프레임워크에 적용되며, vue 프레임워크를 예로 들어 다음 단계만 수행하면 적응을 달성할 수 있습니다:
1, postcss-px-to-viewport 설치
npm i postcss-px-to-viewport
2, 프로젝트의 루트 디렉토리에 vue.config.js라는 파일을 빌드합니다.
3, vue.config.js에서 postcss-px-to-viewport를 도입합니다.
const pxtovw = require('postcss-px-to-viewport')
4의 vue.config.js 구성 항목은 다음과 같습니다.
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 단위 변환이 필요하며 기본값은 "px"입니다.
viewportWidth: 1920, // 디자인 초안 뷰포트 너비
unitPrecision: 5, // 정밀도 이후 유지되는 단위 변환
propList: ['*'], // vw 속성 목록으로 변환할 수 있습니다.
viewportUnit: 'vw', // 뷰포트 단위를 사용하기를 희망합니다.
fontViewportUnit: 'vw', // 뷰포트 단위를 사용하여 글꼴
selectorBlackList: [], // CSS 선택기를 무시해야 하며 뷰포트 단위로 변환되지 않고 원래 px 및 기타 단위를 사용합니다.
minPixelValue: 1, // 최소 변환 값을 설정하고, 1이면 1보다 큰 값만 변환됩니다.
mediaQuery: false, // 단위 변환이 필요한지 미디어 쿼리
replace: true, // 대체 속성을 추가하지 않고 속성 값을 직접 대체할지 여부
exclude: undefined, // 특정 폴더의 파일 또는 특정 파일 무시(예: 'node_modules' 파일 아래에
include: undefined, // 포함을 설정하면 일치하는 파일만 변환됩니다.
landscape: false, // landscapeWidth에 따라 생성된 미디어 쿼리 조건 추가 여부@media (orientation: landscape)
landscapeUnit: 'vw', // 가로에 사용되는 단위
landscapeWidth: 1920 // 가로에서 사용되는 뷰포트의 너비
}
}
}
5를 다시 시작하면 프로젝트를 다시 시작할 수 있습니다.
