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

總結

以上是生活随笔為你收集整理的nuxt.js实战之移动端rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。