vue 프로젝트에서 rem 레이아웃을 사용하는 방법

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을 사용하여 적응하는 방법의 두 가지 방법입니다. 다른 방법이 있는 사용자는 의견 영역에 답변을 환영합니다!

추천

출처blog.csdn.net/SH744/article/details/127757991