rem大小的設置并沒有絕對的標準，按照自己喜好來即可，確定好1rem需要代表設計稿多少像素即可，以下以設計稿1920為例，期望效果：1rem對應設計稿10px，分辨率1920下html字體大小為10px，192rem = 1920px，根據當前屏幕大小和設計稿比例計算根元素字體大小

(function px2rem(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth)return;//設計稿為1920*1080，根據當前屏幕和審計稿比例設置根元素字體，為方便設置，系數乘以10，parseInt解決部分設備渲染字體發虛情況，1rem 對應設計稿10pxdocEl.style.fontSize = parseInt((clientWidth * 10 / 1920).toFixed(4) * 1) + 'px';window.ROOT_BASE_FONTSIZE = parseInt((clientWidth * 10 / 1920).toFixed(4)) * 1;};recalc();if (!doc.addEventListener)return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

使用vscode插件px to rem，設置設計稿大小為1920，根元素字體為10px，再到elementUI的css文件執行Alt+z即可，這個時候input的高度變為4rem，對應40px，如果是用在平板、移動端需要進行放大效果才比較好，畢竟1920的設計稿到375的iPhone上顯示，等于縮小了5倍，和設計稿比例相差太大顯示效果是不好的，根據實際情況調整。

總結

以上是生活随笔為你收集整理的根据设计稿设置rem大小，elementUI px转rem的全部內容，希望文章能夠幫你解決所遇到的問題。

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