vue 프로젝트에서 rem 레이아웃을 사용하는 방법
장면:
모바일 프로젝트 개발에서 rem 레이아웃을 사용하여 휴대폰 페이지 레이아웃을 구현해야 합니다. 어떻게 사용합니까?
이 기사는 vue 프로젝트에서 rem 레이아웃을 사용하는 전체 프로세스를 자세히 설명하므로 주의 깊게 읽을 수 있습니다!
방법:
(1) lib-flexbile 사용
(2) postcss-pxtorem 사용
알아채다:
충돌을 피하려면 두 가지 방법 중 하나를 선택하십시오! !!
방법 1: lib-flexible 사용
1. 설치 패키지
npm i lib-flexible
2. 파일 가져오기
在main.js（入口）中引入js文件 ---
import 'lib-flexible/flexible.js'
3. 필요에 따라 rem을 설정합니다.
在node_modules文件中找flexible设置rem
为了方便可以设置rem为 width / 37.5
相当于1rem=10px
4. 렘 사용
//比如设置p标签字体大小为24px
p {
font-size:2.4rem
}
방법 2: postcss-pxtorem 사용
1. 설치 패키지
//安装 postcss-pxtorem
npm i postcss-pxtorem -s
2. rem.js 파일 생성
src 디렉토리에 새 rem 폴더를 만들고(일반적으로 util 폴더를 만들 수 있음) 새 rem.js를 만들고 다음 코드를 추가합니다.
//兼容处理
function setHtml() {
//获取设备宽度
var deviceWidth = document.documentElement.offsetWidth;
//给html标签设置fontSize，就是给rem赋值
document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}
//窗口大小变化的时候执行
window.onresize = setHtml;
//页面初始加载时也要触发
setHtml();
3. 새로운 .postcssrc.js 생성
프로젝트의 루트 디렉터리에 새 .postcssrc.js를 만들고(참고 . 추가하는 것을 잊지 마세요) 다음과 같이 코드를 추가합니다.
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
4. main.js에 도입
참고: 경로는 생성한 폴더를 기반으로 합니다.
import '@/rem/rem.js'
5. 본문의 글꼴 크기 설정
html {
font-size: 10px; // 相当于1rem = 10px
}
body {
font-size: 16px;
}
6. 흐름도를 참조할 수 있습니다.
위는 vue가 rem을 사용하여 적응하는 방법의 두 가지 방법입니다. 다른 방법이 있는 사용자는 의견 영역에 답변을 환영합니다!