為了計算方便，一般建議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;
(設定引數即可)
name
="viewport"
content
="width=device-width,initial-scale=1.0,maximim-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"
>
.wrap
.test
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"
;
vue專案移動端 pc端適配方案（px轉rem）
vue專案移動端 pc端適配方案 npm i lib flexible snpm i postcss px2rem s簡要介紹這兩個包的用途 lib flexible會為頁面根據螢幕自動新增標籤，動態控制initial scale，maximum scale，minimum scale等屬性的值。在...
移動端開發的適配和1px問題
移動端開發適配 讓前端開發者的 在不同手機螢幕下展示相同的效果 1.查詢 適配 media only screen and min width 320px media only screen and min width 360px media only screen and min width 37...
ui設計移動端字型適配 移動端介面設計之尺寸篇
畫布尺寸 新建750 1334 解析度72，畫素 英吋。常見的字型大小 24px 26px 28px 30px 32px 34px，36px等等。記住是偶數的。最小字型大小20px。字型 中文用蘋方黑，英文用san francisco，如果安不上也可以用helvetica代替。ios開發裡單位是pt...