181
移動端自適應布局的最好工具-rem
提到rem,大家首先會想到的是em/px/pt這類的詞語,大多數人眼中這些單位是用於設置字體的大小的,沒錯這的確是用來設置字體大小的,但是對於rem來說它可以用來做移動端的響應式適配哦
先看看兼容性,關於移動端:
ios:6.1係統以上都支持
android:2.1係統以上都支持
基本上主流瀏覽器都支持,可以安心的往下看了
rem設置字體大小
rem是(font size of the root element),意思就是根據網頁的根元素來設置字體大小,和em(font size of the element)的區別是:em是根據其父元素的字體大小來設置,而rem是根據網頁的根元素(html)來設置字體大小的,舉一個簡單的例子
現在大部分瀏覽器IE9+/Firefox/Chrome/Safari/Opera,如果我們不修改相關的字體配置,都是默認顯示font-size是16px即
html {
font-size:16px;
}
那麼如果我們想給一個P標簽設置12px的字體大小那麼用rem來寫就是
p {
font-size:0.75rem; //12÷16=0.75(rem)
}
基本上使用rem這個單位來設置字體大小基本上是這個套路,好處是假如用戶自己修改了瀏覽器的默認字體大小,那麼使用rem時就可以根據用戶的調整的大小來顯示了;但是rem不僅可以適用於字體,同樣可以用於width/height/margin這些樣式的單位;下麵來具體說一下
rem進行屏幕適配
在講rem屏幕適配之前,先說一下之前做移動端適配的方法,一般可以分為:
1.簡單一點的頁麵:一般高度直接設置成固定值,寬度一般撐滿整個屏幕
2.稍複雜一些的是利用百分比設置元素的大小來進行適配,或者利用彈性布局flex等css去設置一些需要定製的寬度
3.再複雜一些的響應式頁麵,需要利用css3的media query屬性來進行適配,大致思路是根據屏幕不同大小來設置對應的css樣式
上麵的一些方法其實也可以解決屏幕適配等問題,但這裏主要介紹的是我在目前工作過程中認為兼容性最好的布局方案——rem(什麼是rem)布局:
rem適配
<style>
.con {
width: 10rem; height: 10rem; background-color: red;
}
</style>
<div ></div>
這是一個div,寬度和高度都用rem來設置了;在瀏覽器裏麵width和height分別是160px,正好是16px*10,那麼如果將html根元素的默認font-size修改一下呢?
<style>
html {
font-size: 17px;
}
.con {
width: 10rem; height: 10rem; background-color: red;
}
</style>
<div ></div>
再來看結果:這時width和height都是170px,這就說明了將rem應用於width和height時同樣適用rem的特性,根據根元素的font-size值來改變自身的值,由此我們應該可以聯想到我們可以給html設定不同的值,從而達到我們css樣式中的適配效果
rem數值計算
如果利用rem來設置css的值,一般要通過一層計算才行,比如如果要設置一個長寬為100px的div,那麼就需要計算出100px對應的rem值是100/16=6.25rem,這在我們寫css中其實算比較繁瑣的一步操作了,
對於沒有使用sass的工程:
為了方便起見,可以將html的font-size設置成100px/10px,這樣在寫單位時,直接將數值除以100/10px在加上rem的單位就可以了
對於使用sass的工程:
前端構建中,完全可以利用scss來解決這個問題,例如我們可以寫一個scss的function px2rem即:
@function px2rem($px){
$rem : 37.5px;
@return ($px/$rem) + rem;
}
這樣當我們寫具體數值的時候就可以寫成:
height: px2rem(90px);
width: px2rem(90px);
這裏你可能會發現一些不理解的地方,就是上麵那個$rem:37.5px是怎麼來的,正常情況下不是默認的16px麼,這個其實就是頁麵的基準值,和html的font-size有關:
rem基準值計算
關於rem的基準值,也就是上麵那個37.5px其實是根據我們所拿到的視覺稿來決定的,主要有以下幾點原因:
1.由於我們所寫出的頁麵是要在不同的屏幕大小設備上運行的,所以我們在寫樣式的時候必須要先以一個確定的屏幕來作為參考,這個就由我們拿到的視覺稿來定;假如我們拿到的視覺稿是以iphone6的屏幕width=375px為基準:
ar docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
這樣計算出來的rem基準值就是37.5(iphone6的視覺稿),這裏為什麼要除以10呢,其實這個值是隨便定義的,因為不想讓html的font-size太大,當然也可以選擇不除,隻要在後麵動態js計算時保證一樣的值就可以
動態設置html的font-size
現在關鍵問題來了,我們該如何通過不同的屏幕去動態設置html的font-size呢,這裏一般分為兩種辦法:
1.利用css的media query來設置:
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size: 37.5px;}
}
2.利用javascript來動態設置,根據我們之前算出的基準值,我們可以利用js動態算出當前屏幕所適配的font-size:
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
由此可見我們可以通過設置不同的html基礎值來達到在不同頁麵適配的目的,當然在使用js來設置時,需要綁定頁麵的resize事件來達到變化時更新html的font-size
rem適配進階
一般我們獲取到的視覺稿大部分是iphone6的,所以我們看到的尺寸一般是雙倍大小的,在使用rem之前我們一般會自覺的將標注/2其實這也並非沒有道理;但是當我們配合rem使用時,完全可以按照視覺稿上的尺寸來設置
1.設計給的稿子雙倍的原因是iphone6這種屏幕屬於高清屏,也即是設備像素比(device pixel ratio)dpr比較大,所以顯示的像素較為清晰
2.一般手機的dpr是1,iphone4，iphone5這種高清屏是2,iphone6s plus這種高清屏是3,可以通過js的window.devicePixelRatio獲取到當前設備的dpr,所以iphone6給的視覺稿大小是(*2) 750×1334了
3.拿到dpr後,我們就可以在viewport meta頭取消讓瀏覽器自動縮放頁麵,而自己去設置viewport的content例如(這裏之所以要設置viewport是因為我們要實現border:1px的效果,假如我給border設置了1px,在scale的影響下,高清屏中就會顯示成0.5px的效果)
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
4.設置完之後配合rem修改
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
rem布局中需要引入的完整js代碼
({
resetRem:function(){
this.setRem();
this.on();
},
setRem:function(){
var me = this;
var rect = window.document.documentElement.getBoundingClientRect();
var width = rect.width > 750 ? 750 : rect.width;
window.rootEm = parseFloat(width / 320 * 20);
document.getElementsByTagName('html')[0].style.fontSize = rootEm + "px";
},
on:function(){
var me = this;
window.onresize = function() {
window.setTimeout(me.setRem, 300);
}
}
})();
假設設計稿是:750px,則$rem=750/320*20=46.875;
最後更新：2017-11-09 16:04:09