谷歌瀏覽器Chrome是Webkit的內(nèi)核，之前，有一個 -webkit-text-size-adjust 的私有 CSS 屬性，通過它即可實(shí)現(xiàn)字體大小不隨終端設(shè)備或?yàn)g覽器影響。
CSS代碼定義如下：
-webkit-text-size-adjust:none;
但是，在現(xiàn)在最新版的谷歌里，已經(jīng)不在支持這個屬性啦。
所以css又出了新的屬性：transform:scale()
我是一個小于12PX的字體
定義一個樣式
body,p{ margin:0; padding:0}
p{font-size:10px;}
放在瀏覽器預(yù)覽，會發(fā)現(xiàn)最新版谷歌已經(jīng)不在支持，還是12像素
所以我們就要用到了，下面屬性
-webkit-transform:scale(0.8); //0.8位縮放倍數(shù)，具體自己根據(jù)實(shí)際需求修改
修改后樣式為
body,p{ margin:0; padding:0}
p{font-size:10px;-webkit-transform:scale(0.8);}
但是，這個屬性會把整個p的屬性都縮放。
如果有背景、邊框、都會被縮??！
所以我們需要修改結(jié)構(gòu)為
我是一個小于12PX的字體
定義樣式為
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);}
改了之后，還是不可以的。
原因 -webkit-transform:scale(0.8); 只能縮放可以定義寬高的元素，而span是行內(nèi)元素，不可以
所以我們修改為
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}
為什么定義 display:inline-block 而不是 display:block？
轉(zhuǎn)為block就獨(dú)占一行啦！如果我后面還有其他元素就會受到影響，所以需要轉(zhuǎn)換為 inline-block
現(xiàn)在放到谷歌瀏覽器里，就會發(fā)現(xiàn)支持字體變小啦
但是還會存在一定的邊距，貌似margin或者padding的間距，這就是縮放存在問題，原來的位置還占有12px字體的大小。
所以，還要對應(yīng)修改margin了，定義為負(fù)的即可.
我是有底線的
掃描二維碼手機(jī)查看該文章
文章引用：http://www.qingbaosc.com/news/webzhishi/1154.html
在線咨詢
電話咨詢
