rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
通常的，我們把html的font-size設置成0.625%;因為瀏覽器默認的字體大小是16px,所以font-size:0.625也就相當於16px*0.625=10px;往后我們要設置字體大小的時候,就可以用rem了.
例如font-size:1.2rem; 就相當於 font-size:12px;了
但可能有一些瀏覽器的默認字體不是16px.所以我們可以直接把html的font-size設置成10px;就可以確保萬無一失.
然后還有個問題,谷歌瀏覽器的最小文字大小為12px;假如把rem用到寬高,行高,邊距的時候,html設定的10px並不起作用.會默認按照12px來計算.因此最好我們只把rem用到字體大小上.
通常的,我們的wap端頁面設計稿的寬度為640px或者750px;我們想要按照設計稿的樣子,盡可能不變形地適應各種寬度的顯示屏.我們就需要字體大小寬高等全都用rem.
這時候,我們可以使用less來進行計算.在不同的瀏覽器寬度時,給html賦予不同的默認字體大小,且字體大小與屏幕寬度的比例是一樣的.如下:
(為了配合谷歌瀏覽器最小字體為12px;所以我們把最窄的屏幕寬度320對應的字體大小設為12px; )
1 @media screen and (min-width:320px){html{font-size:12px;}} 2 @media screen and (min-width:346px){html{font-size:13px;}} 3 @media screen and (min-width:352px){html{font-size:14px;}} 4 @media screen and (min-width:400px){html{font-size:15px;}} 5 @media screen and (min-width:480px){html{font-size:18px;}} 6 @media screen and (min-width:560px){html{font-size:21px;}} 7 @media screen and (min-width:640px){html{font-size:24px;}}
另外就是,我們平時切圖,可能要按照比例來,例如640寬的設計圖,我們的字體大小,行高之類的,可能就取設計稿大小的一半.
這在320px寬的屏幕中顯示是非常正常的. 但在稍微寬一點的屏幕里, 整個頁面跟設計稿比起來就相對比較扁了..
(我想過一個wap布局的辦法,就是按照設計圖的大小,把頁面設計出來,然后通過zoom來改變縮放比例,達到寬度100%的效果,貌似大家都不提倡這樣,誰能告訴我原因?)
為了能根據設計圖,通過很少的計算就能布局,我們用less,計算出一個10px大小的值,我們命名為rex;
1 @rex : 5rem/12; /* 640的設計圖時: 5rem/12; 750的設計圖時: 16rem/45 */
然后這個@rex我們就可以按照設計圖的尺寸,當它是10px來使用.(可以省去很多的計算)
例如在640寬的設計圖里, 有一行字體大小為36px; 行高為100px的字.我們就可以寫成
1 .txt{font-size:3.6*@rex; line-height:10*@rex;}
這樣一來,在各個寬度下看的樣子都幾乎是一樣的,不會有被"壓扁"的現象存在.