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 >&#