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. vue計算屬性怎么樣與for結合使用2. angular.js - vue/react 渲染內容抖動3. node.js - 如何使用mongoose連接數據庫中已經存在的一個集合。4. html5 - 如何實現圖中的刻度漸變效果？5. css - div外層有一圈白色6. node.js - version3的generic-pool問題7. javascript - Object.create(null) 和 {} 區別是什么8. javascript - vue v-for循環，子循環內要取到父循環的鍵值，如何做到？9. redis - 不知道國內有多少用Python + CouchDB的朋友，談一下經驗。。。10. PHP能實現百度網盤的自動化么？
網公網安備