84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
如果在移动项目中使用像weui这种样式库怎么结合rem布局?比如想用淘宝的flexible方案布局,会改变dpr
[data-dpr="2"] p { font-size: 24px; } [data-dpr="3"] p { font-size: 36px; }
weui里面字体就会出现异常,请问怎么解决这种问题?或者说在用第三方样式库/组件库的时候不用把px改成rem?
闭关修行中......
這個是lib.flexible的文檔說明,你可以去看看。
如果你不想改變dpr,完全可以在meta標籤裡面指定dpr的值,這樣就不會出現你說的問題了
就我所知講說
考慮到字體的點陣訊息,一般文字尺寸多會採用 16px 20px 24px等值,
16px
20px
24px
若以rem指定文字尺寸,會產生諸如21px,19px這樣的值,會導致字形難看,毛刺,甚至黑塊,故以px單位進行設置,然後根據設備的分辨率設置不同的font-size,因移動端大部分的設備獨立像素不會相差太大,故可根據不同的dpr進行設定。
rem
21px
19px
px
font-size
dpr
[data-dpr = "2"] p { font-size:24px; } [data-dpr="3"] p{ font-size:36px; } /* 或者使用媒体查询的方法设置 */
可能也有要求隨螢幕縮放,且考慮到這類文字一般都比較大,超過30px的話,也可以用rem設定字體。
30px
使用淘寶的flexible方案佈局並不會自動把你的設定的單位px轉換成rem,當然用插件可以實現。
flexible
手淘方案會動態產生initial-scale,maximum-scale,minimum值,佈局寬高使用rem,然後html標籤設定font-size,利用fone-size控制rem寬高,並且用設備像素比來設定dpr来适配不同行動裝置的螢幕密度顯示flexible.js來源碼
initial-scale,maximum-scale,minimum
html
fone-size
dpr来适配
這個是lib.flexible的文檔說明,你可以去看看。
如果你不想改變dpr,完全可以在meta標籤裡面指定dpr的值,這樣就不會出現你說的問題了
解決行動端適配字型問題:
就我所知講說
一般文字尺寸
考慮到字體的點陣訊息,一般文字尺寸多會採用
16px
20px
24px
等值,若以
rem
指定文字尺寸,會產生諸如21px
,19px
這樣的值,會導致字形難看,毛刺,甚至黑塊,故以px
單位進行設置,然後根據設備的分辨率設置不同的font-size
,因移動端大部分的設備獨立像素不會相差太大,故可根據不同的dpr
進行設定。標題類文字
可能也有要求隨螢幕縮放,且考慮到這類文字一般都比較大,超過
30px
的話,也可以用rem
設定字體。需注意:
使用淘寶的
flexible
方案佈局並不會自動把你的設定的單位px
轉換成rem
,當然用插件可以實現。手淘方案會動態產生
initial-scale,maximum-scale,minimum
值,佈局寬高使用rem
,然後html
標籤設定font-size
,利用fone-size
控制rem
寬高,並且用設備像素比來設定dpr来适配
不同行動裝置的螢幕密度顯示flexible.js來源碼