nuxt.js实战之移动端rem

nuxt.js的项目由于是服务端渲染，通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷。由于设置字体的代码不能做服务端渲染，导致服务端返回的代码一开始没有相应的跟字体，直到与前端代码进行合并根字体改变，这就造成我们的应用初始状态会根据两种根字体改变尺寸，体验很不好。

于是采用服务端可以渲染的css解决方案。

vw + postcss-pxtorem    或者    vw + sass（自己实现px2rem），这里如果是nuxt项目推荐使用第一种方式。

nuxt.config.js中配置如下：

postcss: [
 require('postcss-pxtorem')({
   rootValue: 40,
   propList: ['*']
 }),
 require('autoprefixer')({
   browsers: ['Android >= 4.0', 'iOS >= 7']
 })
]

根据这个rootValue使用vw设置开发屏幕下的跟字体，假设我的设计稿是750宽度，则  跟字体 = 40 / 7.5vw（100vw对应750px，1vw = 7.5px）, 为 5.333333333333333vw。

转载于:https://www.cnblogs.com/chunshan-blog/p/9960607.html