css - 移动端rem适配问题

Question

如果在移动项目中使用像weui这种样式库怎么结合rem布局?
比如想用淘宝的flexible方案布局，会改变dpr

[data-dpr="2"] p {
    font-size: 24px;
}

[data-dpr="3"] p {
    font-size: 36px;
}

weui里面字体就会出现异常，请问怎么解决这种问题？
或者说在用第三方样式库/组件库的时候不用把px改成rem?

Answer 1

這個是lib.flexible的文檔說明，你可以去看看。

Answer 2

如果你不想改變dpr，完全可以在meta標籤裡面指定dpr的值，這樣就不會出現你說的問題了

Answer 3

解決行動端適配字型問題：

就我所知講說

一般文字尺寸

考慮到字體的點陣訊息，一般文字尺寸多會採用 16px 20px 24px等值，

若以rem指定文字尺寸，會產生諸如21px，19px這樣的值，會導致字形難看，毛刺，甚至黑塊，故以px單位進行設置，然後根據設備的分辨率設置不同的font-size，因移動端大部分的設備獨立像素不會相差太大，故可根據不同的dpr進行設定。

[data-dpr = "2"] p {

font-size:24px;

}

[data-dpr="3"] p{

font-size:36px;

}
/* 或者使用媒体查询的方法设置 */

標題類文字

可能也有要求隨螢幕縮放，且考慮到這類文字一般都比較大，超過30px的話，也可以用rem設定字體。

需注意：

1. 使用淘寶的flexible方案佈局並不會自動把你的設定的單位px轉換成rem，當然用插件可以實現。

2. 手淘方案會動態產生initial-scale,maximum-scale,minimum值，佈局寬高使用rem，然後html標籤設定font-size，利用fone-size控制rem寬高，並且用設備像素比來設定dpr来适配不同行動裝置的螢幕密度顯示
   flexible.js來源碼