為了計算方便，一般建議 1rem = 100px(設計稿px)，要換算這樣的比例需要設置html對應的fontSize，計算規則如下：
fontSize = 屏幕寬度 / 設計稿寬度 * 基本寬度
如果基本寬度是100，那么 1rem = 100px(設計稿px)

假如設計稿寬度是 750px , 開發以iphone6/7/8為例，寬度是375，如果想1rem=100px(設計稿px)，那么fontSize = 375/750*100 = 50px;

以下代碼可以按設計稿適配1rem = 100px;
(設置參數即可)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximim-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"> .wrap {width: 7.5rem; /* 6.4rem 10.8rem */ } .test {width: 1rem; /* 設計稿實際寬度100px */ } var baseSize = 100; // 1rem = 100px(設計稿); var baseWidth = 750; // 640 750 1080 var fontSize = (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2); document.getElementsByTagName("html")[0].style.fontSize = fontSize+"px";

總結

以上是生活随笔為你收集整理的移动端根据设计稿宽度适配 px转换相对单位rem的全部內容，希望文章能夠幫你解決所遇到的問題。

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