nuxt.js的專案由於是服務端渲染，通過js動態調整不同尺寸裝置的根字型這種rem方案存在一種缺陷。由於設定字型的程式碼不能做服務端渲染，導致服務端返回的程式碼一開始沒有相應的跟字型，直到與前端程式碼進行合併根字型改變，這就造成我們的應用初始狀態會根據兩種根字型改變尺寸，體驗很不好。

於是採用服務端可以渲染的css解決方案。

vw + postcss-px2rem    或者    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。