奥非域

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浏览器中查看效果。

Vue