眾所周知,在瀏覽器中,當字體的大小小于12px的時候,瀏覽器是不會顯示的,瀏覽器會認為小于12px的字體不是人眼所視的字體,會自動的把字體調整為12px,這對用戶來說很方便,但是對于開發(fā)者就是一個難題,當設計師把字體的大小調整到12px一下才能不對整體的一個排版造成影響,那么我們該怎么做呢?
這里可以看到,我們已經設置字體大小為9px了,但是瀏覽器顯示的卻還是12px。
解決方法是:我們都知道css里有一個屬性叫做transform的scale(),他能放大和縮小元素,如果我們使用scale(0.75)就能把元素縮小到9px。
但是現(xiàn)在,元素確實縮小了,但是卻不能像以前一樣對齊了,因為他是等比例縮放的,這時候我們使用transform-origin把他的x軸偏移量變?yōu)?。如圖所示,現(xiàn)在元素被成功縮小了。