CSS作為前端開發過程中必不可少的技術,可以幫助我們實現頁面布局、字體排版、動畫效果等等功能。在移動設備端,字體的顯示往往比較頭痛,因為不同手機系統和不同分辨率的屏幕可能會對字體顯示造成較大影響,這時候我們可以通過CSS來強制手機顯示字體。
/* 強制字體顯示 */ body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
在上述代碼中,我們使用了兩個CSS屬性:-webkit-text-size-adjust和-ms-text-size-adjust,這兩個屬性可以讓我們強制控制字體大小的縮放,從而保證字體在各種設備上都能夠良好地顯示。
-webkit-text-size-adjust:是用于IOS設備的屬性,用來控制文字大小的縮放比率,當值為100%時,即表示不縮放及保持原始字體大小;
-ms-text-size-adjust:是用于Windows Phone系統的屬性,用來控制文字大小的縮放比率,同樣當值為100%時,即表示不縮放及保持原始字體大小。
需要注意的是,當使用-webkit-text-size-adjust屬性時,需要加上-webkit-前綴,否則該屬性在IOS設備上將不起作用。
除了上述CSS屬性外,我們還可以通過使用@media查詢來控制不同分辨率設備上的字體顯示。例如:
/* 手機端字體設置 */ @media screen and (max-device-width:480px){ body{ font-size:16px; } }
上述代碼中,我們通過@media查詢來判斷設備的屏幕寬度是否小于480px,如果是,則將字體大小設置為16px。因此,我們可以針對不同設備設置不同的字體大小,從而保證在各種分辨率的手機上都能夠獲得良好的顯示效果。
上一篇jquery輸出對話框
下一篇css怎么不變形圖片