用rem在移動端不同解析度下的完美顯示
對於App來說,需要適應各種移動端的解析度。為了解決這一問題,我也是各種買書,查部落格得到一種適配性比較好的方法。就是rem。
rem(font size of the root element)是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對於父元素的字型大小的單位。它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。
不僅是App能使用rem,PC端網頁也能使用rem,只不過rem在App下出於相容性的考慮作用更加的大。
rem能等比例適配所有解析度。
rem是通過根元素進行適配的,網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子:
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
假設就使用瀏覽器預設的字號16px,來看一些px單位與rem之間的轉換關係:
如果你要設定一個不同的值,那麼需要在根元素<html>中定義,為了方便計算,時常將在<html>元素中設定font-size值為62.5%,相當於在<html>中設定font-size為10px;
rem在眾多瀏覽器中都已得到很好的支援,如果您的專案不用考慮IE低版本的話,你就可以放心的使用了,如果您的專案在IE低版本中還佔有不少的比例,那麼你還在擔心使用rem不能相容,而不敢使用。其實是沒有必要的,可以針對低版本的IE瀏覽器做一定的處理:
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }
h1 { font-size: 24px; font-size: 2.4rem; }