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

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

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

<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; /* 設(shè)計(jì)稿實(shí)際寬度100px */ } var baseSize = 100; // 1rem = 100px(設(shè)計(jì)稿); var baseWidth = 750; // 640 750 1080 var fontSize = (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2); document.getElementsByTagName("html")[0].style.fontSize = fontSize+"px";

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。