vue移动端屏幕自适应

移动端屏幕自适应

1.rem:

rem(font size of the root element)是指相对于根元素的字体大小的单位

---

2.想法:

使用rem，字体大小与html标签的font-size属性相关，那么只要根据屏幕大小改变html标签的font-size属性，字体大小就与屏幕大小相关，就能使得移动端屏幕自适应

---

3.根据屏幕大小改变html标签的font-size属性:

使用单位vw，1vw === 1/10屏幕宽度，这样就可以根据屏幕大小改变html标签的font-size属性

---

4.px转rem:

设计图使用px为单位，难道要自己一个个去换算rem吗？使用postcss-pxtorem插件自动转换

npm install postcss-pxtorem --save-dev

在项目根目录新建postcss.config.js，参考配置如下：

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

你需要告诉postcss-pxtorem，你写px的时候，你的html标签的font-size属性是多少，即rootValue
例如：设计图以iphone6为参考，屏幕宽度是375px，假设有如下样式：

html{font-size: 10vw}
div{font-size: 16px}

你需要告诉postcss-pxtorem，html标签的font-size属性是 1/10 的375px，即rootValue: 37.5，然后按照设计图写样式即可

---

5.验证:

运行项目或打包项目，然后查看div，发现px已经转换成rem

div{font-size: 0.42667rem}

更改屏幕大小不同的模拟器，发现字体大小也跟着变化，移动端屏幕自适应完成

---

6.总结:

插件仅仅是帮我们做了换算，并不是帮我们做了自适应！！！