方案一：rem

rem：相对单位，1rem = 根元素1 font-size大小

如果根元素 < html style="font-size: 20px;" > ，1rem = 20px ，2rem = 40px。

后续只需要使用rem为单位即可

main.js

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 ​
 // 获取屏幕分辨率的宽 / 10
 document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
 ​
 Vue.config.productionTip = false
 ​
 new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount('#app')

//views/About.vue

<template>
   <div class="about">
     <div class="box"></div>
   </div>
 </template>
 ​
 <style scoped>
 .box {
   width: 4rem;
   height: 2rem;
   background-color: pink;
 }
 </style>

 

方案二：rem插件

amfe-flexible

amfe-flexible可以自动给 < html > 设置font-size值为设备宽度的1/10

npm:amfe-flexible - npm

安装：npm i amfe-flexible

配置：

//main.js
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 ​
 // 引入amfe-flexible
 import 'amfe-flexible'
 ​
 Vue.config.productionTip = false
 ​
 new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount('#app')

//views/About.vue
<template>
   <div class="about">
     <div class="box"></div>
   </div>
 </template>
 ​
 <style scoped>
 .box {
   width: 4rem;
   height: 2rem;
   ackground-color: pink;
 }
 </style>

 

效果同方案一rem一样。

方案三：vw、vh

vw：视窗宽度，1vw=视窗宽度的1%

vh：视窗高度，1vh=视窗高度的1%

vw和vh是相对单位，实际大小会随着设备宽度的变化自动变化

<template>
   <div class="about">
     <div class="box"></div>
   </div>
 </template>
 ​
 <style scoped>
 .box {
   /* 40vw就是设备宽度的40% */
   width: 40vw;
   height: 20vw;
   background-color: pink;
 }
 </style>

 

方案四：viewport插件

postcss-px-to-viewport

postcss-px-to-viewport：将px转化为vw/vh

npm：www.npmjs.com/package/pos…

安装：npm i postcss-px-to-viewport

配置：

postcss.config.js viewportWidth：设计稿的视口宽度

 

module.exports = {   
   plugins: {  
        'postcss-px-to-viewport': {   
           viewportWidth: 750,     
    },   
  },  
};

 

假设UI设计稿宽度是750px，色块设计稿标注是300px，此时色块在设计稿占比是300 / 750 = 2 / 5

在开发时可以直接写设计稿标注的大小

views/About.vue

 <template> 
   <div class="about">  
    <div class="box">
</div>  
  </div> 
 </template> 
 ​  <style scoped>  
.box {  
  /* 300 / 750 = 2 / 5 => 40vw */  
  width: 300px;
    height: 150px; 
   background-color: pink;
  } 
 </style>

转换规则：

300 / viewportWidth，配制的参考值是750，300 / 750得到结果为2/5，设备实际显示色块宽度占比就是2/5也就是40vw，与UI设计稿占比一致

效果同方案三vw一样。

vant兼容

如果使用了vant组件库，vant的设计稿是根据375px去设计的，为了避免冲突需要单独设置下，

const path = require('path'); 
 module.exports = ({ file }) => {   
   const designWidth = file.includes(path.join('node_modules', 'vant')) ? 375 : 750;      return {   
       plugins: {  
            "postcss-px-to-viewport": {   
               viewportWidth: designWidth,            
 }    
     
}   
  } 
 }

方案五 postcss-pxtorem

rem方案虽然可以解决适配问题，但是如果UI设计稿使用的是px单位，自己转换成rem比较麻烦

所以需要使用postcss-pxtorem，可以把px转换为rem

npm：www.npmjs.com/package/pos…

安装: npm i postcss-pxtorem

postcss-pxtorem和amfe-flexible需要配合使用

配置：

无需在main.js中设置，需要在项目根目录下新增配置文件postcss.config.js

propList：表示哪些属性的px转换为rem， '*' 表示所有属性都转换

rootValue：转换参考值，写UI设计稿宽度的1/10，假设UI设计稿宽度是750px所以写75，如UI设计稿是375px则写37.5

 module.exports = {
     plugins: {
         'postcss-pxtorem': {
             rootValue() {
                 return 75;
             },
             propList: ['*'],
         },
     },
 };

 

假设UI设计稿宽度是750px，色块设计稿标注是150px，此时色块在设计稿占比是150 / 750 = 1 / 5

在开发时可以直接写设计稿标注的大小

转换规则：

150 / 配制的参考值，配制的参考值是75，也就是150 / 75，得到结果为2，就是2rem

<template>
   <div class="about">
     <div class="box"></div>
   </div>
 </template>
 ​
 <style scoped>
 .box {
   /* 150 / 75 = 2 => 2rem */
   width: 150px;
   height: 150px;
   background-color: pink;
 }
 </style>

 

设备宽为375px，amfe-flexible会设置1rem = 37.5px，所以2rem实际大小就是75px

设备实际显示75 / 375 = 1 / 5，色块占设备宽度的1/5，与UI设计稿色块占比保持一致。