px to rem 移动端网页开发

对于图片多的手机网站，rem无疑是较好的解决方案，但对于文字较多的网站，用户体验就很差了，因为谁也不会喜欢看到变大变形的文字内容，但总的来说，rem还是可以一用的，就目前而言。

那么，如何在手机端网站（H5）上简单的使用rem呢？vscode中其实有很多插件可以使用，只需搜索px to rem就有一堆，效果也是类似，就是在你输入px时，可以快速选择替换成rem，会自动帮你计算好；还有一种方案，比如vue项目，可以通过安装插件实现，你就可以继续按UI设计的px去做界面，然后由插件自动换算成rem，具体如下：

安装插件：
npm i -S postcss-pxtorem@5.1.1
npm i -S amfe-flexible

然后在main.js引用
import 'amfe-flexible'

根目录创建文件postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      // 这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的rem值会变小
      propList: ['*']
    }
  }
}

经过以上的设置，就不用管了，在发布项目时，自动会计算成rem了，具体可以在chrome浏览器中查看效果。