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。