問(wèn)題
移動(dòng)端開(kāi)發(fā)需要考慮不同手機(jī)上不同分辨率的展示效果傅蹂,所以需要自適應(yīng)解決方案徐许;
解決
通用的方案是使用rem羊精,rem是root-em的縮寫(xiě),是根相對(duì)單位,其相對(duì)的是html的font-size的單位;
首先改执,html的font-size默認(rèn)是16px => 1rem=16px赦邻;
那么髓棋,要表示14px,就是0.875rem惶洲,是不太好看且計(jì)算起來(lái)也比較麻煩的按声;
所以,如果把html的font-size設(shè)置為10px恬吕,那么表示14px就是1.4rem了签则。
但是,為了兼容性和未來(lái)發(fā)展趨勢(shì)的綜合考慮铐料,px這個(gè)單位的含義已經(jīng)越來(lái)越混亂渐裂,幾乎無(wú)法評(píng)估以后的設(shè)備是會(huì)一直像現(xiàn)在這樣對(duì)網(wǎng)頁(yè)上的px做兼容處理侨颈,還是讓px回歸“像素”的本意
如果,設(shè)置html {font-size: 62.5%;}芯义,1rem = 16px*62.5%=10px哈垢,14px=1.4rem;
而且扛拨,62.5%代表默認(rèn)字體尺寸的62.5%耘分,這個(gè)含義基本不會(huì)有混亂
總結(jié)
《響應(yīng)式Web設(shè)計(jì)實(shí)踐》中提到過(guò)這一點(diǎn),桌面瀏覽器默認(rèn)頁(yè)面字體大小是16px绑警,這種情況下設(shè)置成具體像素大小或者對(duì)應(yīng)的百分比求泰,看起來(lái)的效果是一樣的,
但是其他類(lèi)型的設(shè)備的默認(rèn)字體大小不一定是16px,特別是高分辨率的設(shè)備计盒,16px大小的字體在它們上面看起來(lái)會(huì)非常小渴频,
?所以不能在body上設(shè)置具體像素值,設(shè)置成百分比北启,可以按照設(shè)備的基準(zhǔn)字體大小給編寫(xiě)的網(wǎng)頁(yè)設(shè)置好最適合用戶瀏覽的字體大小卜朗。
? 最重要的不是屏幕實(shí)際的像素大小,屏幕上文字的可讀性才是最重要的咕村。