css - 移動端rem適配問題
問題描述
如果在移動項(xiàng)目中使用像weui這種樣式庫怎么結(jié)合rem布局?比如想用淘寶的flexible方案布局,會改變dpr
[data-dpr='2'] p { font-size: 24px;}[data-dpr='3'] p { font-size: 36px;}
weui里面字體就會出現(xiàn)異常,請問怎么解決這種問題?或者說在用第三方樣式庫/組件庫的時候不用把px改成rem?
問題解答
回答1:這個是lib.flexible的文檔說明,你可以去看看。
回答2:如果你不想改變dpr,完全可以在meta標(biāo)簽里面指定dpr的值,這樣就不會出現(xiàn)你說的問題了
回答3:解決移動端適配字體問題:就我所知講講
一般文字尺寸考慮到字體的點(diǎn)陣信息,一般文字尺寸多會采用 16px 20px 24px等值,
若以rem指定文字尺寸,會產(chǎn)生諸如21px,19px這樣的值,會導(dǎo)致字形難看,毛刺,甚至黑塊,故用px單位進(jìn)行設(shè)置,然后根據(jù)設(shè)備的分辨率設(shè)置不同的font-size,因移動端大部分的設(shè)備獨(dú)立像素不會相差太大,故可根據(jù)不同的dpr進(jìn)行設(shè)置。
[data-dpr = '2'] p {font-size:24px;}[data-dpr='3'] p{font-size:36px;}/* 或者使用媒體查詢的方法設(shè)置 */標(biāo)題類文字
可能也有要求隨屏幕縮放,且考慮到這類文字一般都比較大,超過30px的話,也可以用rem設(shè)置字體。
需注意:使用淘寶的flexible方案布局并不會自動把你的設(shè)置的單位px轉(zhuǎn)換成rem,當(dāng)然用插件可以實(shí)現(xiàn)。
手淘方案會動態(tài)生成initial-scale,maximum-scale,minimum值,布局寬高使用rem,然后html標(biāo)簽設(shè)置font-size,利用fone-size來控制rem寬高,并且用設(shè)備像素比來設(shè)置dpr來適配不同移動設(shè)備的屏幕密度顯示flexible.js源碼
相關(guān)文章:
1. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題2. javascript - 求幫助 , ATOM不顯示界面!!!!3. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示4. 視頻文件不能播放,怎么辦?5. python bottle跑起來以后,定時執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?6. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處7. javascript - ios返回不執(zhí)行js怎么解決?8. javascript - 移動端自適應(yīng)9. html5 - HTML代碼中的文字亂碼是怎么回事?10. mysql 查詢身份證號字段值有效的數(shù)據(jù)
