REM適配方案--佈局
頁面佈局
- 流式佈局
適用頁面特點:一般使用於–左側固定+右側自適應;左右固定寬度+中間自適應
通俗來講容器百分比自適應
需求:左邊寬高不變,右邊寬度隨著螢幕變化自適應
<div class="box">
<div class="left">左邊固定寬高,右邊像液體一樣流動</div>
<div class="right">隨著螢幕寬度變化而變化</div>
</div>
<style>
body,html{
height : 100%;
}
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100%;
}
.left{
width: 100px;
background: red;
height: 100px;
float: left;
}
.right{
height : 100%;
overflow: hidden;
/*觸發bfc*/
background: green;
}
</style>
.right如果不設定overflow:hidden;那麼寬度將始終佔滿整個螢幕,呈現上下佈局了,流式佈局只能做寬度的適配…
2. 響應式佈局
一個網站能夠相容多個終端
主要利用了媒體查詢,bootstrap提供了柵格系統等也很好的做適配,但高度一般都是固定的,不會隨著螢幕的變化而變化…
3. 伸縮佈局
在伸縮盒子裡面,我們可以給子盒子分配寬度,但無法分配高度
即:flex只給寬度設定,高度不會隨著容器的變化而變化
rem佈局
REM是相對單位,是相對HTML根元素
認識Rem(rem是什麼)
rem作用於非根元素時,相對於根元素字型大小;rem作用於根元素字型大小時,相對於其出初始字型大小
- 現在.html的body寫下兩個元素
<div class="rem">REM</div>
<div class="em">EM</div>
設定他們的字型大小
.rem{
font-size: 2rem;
}
.em{
font-size: 2em;
}
結果如下
接著我們在設定body字型元素的大小
body{
font-size: 30px;
}
效果如下,明顯的變化,rem沒有變化,em變化了
接著我們給文件的html設定字型大小
我們可以發現rem和em一樣大小,都是兩倍放大
html{
font-size: 30px;
}
REM與EM
- rem是單位,由瀏覽器轉換為畫素值
- em作為font-size的單位時,其代表父元素的字型大小,em作為其他屬性單位時,代表自身字型大小
從上可以看出:rem 單位基於 html 元素的字型大小,由瀏覽器轉換為畫素值,具體取決於您的設計中的字型大小設定,是靈活、 可擴充套件的單位
- rem是靈活的單位,可以控制元素整體放大縮小
我們繼續給我們的頁面.rem新增類
.rem{
font-size: 2rem;
width: 10rem;
height: 5rem;
background:red;
}
也就是隻要頁根元素(html)的字型變化,寬高也會自適應發生變化
為什麼要用Rem佈局
- 當我們要做寬高自適應佈局,整體縮放的佈局,rem佈局比較適合使用,如蘇寧的M端
- 一些偏向app類的,圖示類的,圖片類的,比如淘寶,活動頁面,rem比較適合使用- 為什麼使用rem不使用em
- 有些人買大螢幕手機可能就是為了讓字型看得更大,rem佈局就起到了很好的使用者體驗
- 對em不是很瞭解從上面以為rem基於頁根元素,
em基於body元素,其實em不是基於body元素,也不是基於其父元素,只是因為字型的繼承,其實em作為容器大小基於當前的字型尺寸 - 瞭解了em,如果使用em做,其複雜程度可想而知
- em牽一髮而動全身,某個發生變化,其後代也可能發生變化,維護更難
- 對em不是很瞭解從上面以為rem基於頁根元素,
怎麼用Rem佈局
既然rem基於html根元素,可以控制元素的整體放大和縮放,做彈性佈局一般是基於螢幕的寬度,也就是我們只要通過媒體查詢@media或則js控制根元素的字型大小,根據螢幕的寬度大小,相對於根元素設定元素大小,就可以達到我們想要元素的整體適應螢幕的效果。
- 因為使用者可能會禁用掉了js,加上一般來說,都是先載入css在載入js的,所以我們選擇使用媒體查詢來控制元素的大小
- 使用媒體查詢結合css使用
/*假設的裝置 320px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
- 如果多種裝置我們就要寫多次配置,還要計算各螢幕的值,此時我們可以使用less,便於我們程式碼的維護,提高我們的效率
- 使用less和媒體查詢,結合實際情況(蘇寧webapp)使用Rem佈局
這是我們擷取頭部的圖片,它的設計稿的寬度750px;設計的根元素字型大小為100px,導航欄的高度是90px,寬度是750px;此時導航欄的高度應該設定為90rem/100=0.9rem,
假設設計稿寬度為75px;設計的根元素則10px;這樣導航欄高度為9px;依舊是9rem/10=0.9rem
也就是說 100/750 = 10/75(預設基準值(已知)/設計稿寬度(已知)= 裝置的基準值(未知)/螢幕寬度(已知))
所以根據主流螢幕,我們使用less配置一套適用的方案
@charset "UTF-8";
//現在主流裝置的螢幕寬度
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//設計稿尺寸(我們拿到的UE圖)
@psdWidth:750px;
//預設基準值(根元素)
@baseFontSize:100px;
//裝置的種類(我們定義裝置的多少)
@len:length(@adapterDeviceList);
//生成各個主流裝置對應的字型大小
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
.adapterMixin(@len);
//此時我們的蘇寧導航欄的容器應該為
.suning{
width: 100%;
height: 0.9rem;
background: #fabc09;
}
<header>
<div class="suning"></div>
</header>
這樣寬度高度就會隨著容器的變化而變化
總結
每種方案都有優缺點,應尋找適合的適配方案