問題描述

如果在移動(dòng)項(xiàng)目中使用像weui這種樣式庫怎么結(jié)合rem布局?比如想用淘寶的flexible方案布局，會(huì)改變dpr

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

weui里面字體就會(huì)出現(xiàn)異常，請(qǐng)問怎么解決這種問題？或者說在用第三方樣式庫/組件庫的時(shí)候不用把px改成rem?

問題解答

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

如果你不想改變dpr，完全可以在meta標(biāo)簽里面指定dpr的值，這樣就不會(huì)出現(xiàn)你說的問題了

就我所知講講

考慮到字體的點(diǎn)陣信息，一般文字尺寸多會(huì)采用 16px 20px 24px等值，

若以rem指定文字尺寸，會(huì)產(chǎn)生諸如21px，19px這樣的值，會(huì)導(dǎo)致字形難看，毛刺，甚至黑塊，故用px單位進(jìn)行設(shè)置，然后根據(jù)設(shè)備的分辨率設(shè)置不同的font-size，因移動(dòng)端大部分的設(shè)備獨(dú)立像素不會(huì)相差太大，故可根據(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方案布局并不會(huì)自動(dòng)把你的設(shè)置的單位px轉(zhuǎn)換成rem，當(dāng)然用插件可以實(shí)現(xiàn)。

手淘方案會(huì)動(dòng)態(tài)生成initial-scale,maximum-scale,minimum值，布局寬高使用rem，然后html標(biāo)簽設(shè)置font-size，利用fone-size來控制rem寬高，并且用設(shè)備像素比來設(shè)置dpr來適配不同移動(dòng)設(shè)備的屏幕密度顯示flexible.js源碼