頁面佈局

1. 流式佈局
   適用頁面特點：一般使用於–左側固定+右側自適應；左右固定寬度+中間自適應
   通俗來講容器百分比自適應
   需求：左邊寬高不變，右邊寬度隨著螢幕變化自適應
   

<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. 伸縮佈局
在伸縮盒子裡面，我們可以給子盒子分配寬度，但無法分配高度

rem佈局

REM是相對單位，是相對HTML根元素

認識Rem（rem是什麼）

rem作用於非根元素時，相對於根元素字型大小；rem作用於根元素字型大小時，相對於其出初始字型大小

1. 現在.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牽一髮而動全身，某個發生變化,其後代也可能發生變化，維護更難

怎麼用Rem佈局

既然rem基於html根元素，可以控制元素的整體放大和縮放，做彈性佈局一般是基於螢幕的寬度，也就是我們只要通過媒體查詢@media或則js控制根元素的字型大小,根據螢幕的寬度大小，相對於根元素設定元素大小，就可以達到我們想要元素的整體適應螢幕的效果。

1. 因為使用者可能會禁用掉了js，加上一般來說，都是先載入css在載入js的，所以我們選擇使用媒體查詢來控制元素的大小
2. 使用媒體查詢結合css使用

/*假設的裝置  320px */
        @media (min-width: 320px) {
            html{
                font-size: 50px;
            }
        }

3. 如果多種裝置我們就要寫多次配置，還要計算各螢幕的值，此時我們可以使用less，便於我們程式碼的維護，提高我們的效率
4. 使用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>

這樣寬度高度就會隨著容器的變化而變化

總結

每種方案都有優缺點，應尋找適合的適配方案