css - 移動端rem適配問題
問題描述
如果在移動項目中使用像weui這種樣式庫怎么結合rem布局?比如想用淘寶的flexible方案布局,會改變dpr
[data-dpr='2'] p { font-size: 24px;}[data-dpr='3'] p { font-size: 36px;}
weui里面字體就會出現異常,請問怎么解決這種問題?或者說在用第三方樣式庫/組件庫的時候不用把px改成rem?
問題解答
回答1:這個是lib.flexible的文檔說明,你可以去看看。
回答2:如果你不想改變dpr,完全可以在meta標簽里面指定dpr的值,這樣就不會出現你說的問題了
回答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設置字體。
需注意:使用淘寶的flexible方案布局并不會自動把你的設置的單位px轉換成rem,當然用插件可以實現。
手淘方案會動態生成initial-scale,maximum-scale,minimum值,布局寬高使用rem,然后html標簽設置font-size,利用fone-size來控制rem寬高,并且用設備像素比來設置dpr來適配不同移動設備的屏幕密度顯示flexible.js源碼
相關文章:
1. docker - 如何修改運行中容器的配置2. javascript - Web微信聊天輸入框解決方案3. 請教各位大佬,瀏覽器點 提交實例為什么沒有反應4. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?5. javascript - 移動端textarea不能上下滑動,該怎么解決?6. javascript - history.replaceState()無法改變query參數7. css - 對于類選擇器使用的問題8. javascript - Ajax加載Json時,移動端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?9. javascript - 為什么這個點擊事件需要點擊兩次才有效果10. javascript - 為什么form表單提交沒有跨域問題,但ajax提交有跨域問題?
