移動端佈局總結

1、流式佈局（百分比佈局）css

使用非固定像素來定義網頁內容，也就是百分比佈局，(特別適合於電商網站的佈局)經過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。這樣的佈局方式，就是移動web 開發使用的經常使用佈局方式。這樣的佈局能夠適配移動端不一樣的分辨率設備。html

2、rem佈局（侷限條件：主要用來適配手機和ipad,除了手機和ipad，其餘的都不能適配。）前端

rem佈局方案（用rem這個單位來作不一樣手機的適配）是如今作手機端頁面最好的。android

首先說一下px、em、rem取用選擇依據？ios

1. px 像素（Pixel），絕對單位，是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換成物理長度，須要指定精度DPI。web

2. em 是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對象內文本的字體尺寸未被人設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以不是一個固定的值。bootstrap

3. rem 是CSS3新增的一個相對單位（root em，根em），使用rem爲元素設定字體大小時，仍然是相對大小，但相對的是HTML根元素。瀏覽器

4. 區別：IE沒法調整那些使用px做爲單位的字體大小，而em和rem能夠進行縮放，rem相對的是HTML根元素，這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。框架

rem佈局中的尺寸是怎樣計算的？iphone

本質是等比縮放，通常是基於寬度，試想一下假設UE圖能等比縮放，假設咱們將屏幕寬度平均分紅100份，每一份用x表示，x=屏幕寬度/100，若是將x做爲單位，x前面的數值就表明屏幕寬度的百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*目標：就是把box適配到常見的iphone5 三星 iphone6手機上*/
      /*1.經過切圖工具，咱們得知 box在設計圖（640px）上的大小是16*16px */
      /*2.把設計圖分紅20份 1份=32px*/
      /*3.iphone5的寬度=320 iphone6的寬度=375 這裏指的是設備獨立像素*/
      /*4.使用媒體查詢*/ @media screen and (width: 320px){ html { /*在320寬的屏幕中 一份是16px*/ font-size: 16px;/*320/20=16*/ } } /*三星*/ @media screen and (width: 360px){ html { /*在360寬的屏幕中 一份是18px*/ font-size: 18px;/*360/20=18*/ } } @media screen and (width: 375px){ html { /*在375寬的屏幕中 一份是18.75px*/ font-size: calc(375px/20);/*375/20=18.75*/ } } .box { /* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小，即16/32*18或16/32*16，就能獲得px爲單位的*/ width: 0.5rem; height: 0.5rem; background-color: red; } </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

例：給了咱們一張640px的設計圖（把640px分紅20份，則每份32px）

適配代碼：

@media screen and (width: 320px){ html { /*在320寬的屏幕中 一份是16px*/ font-size: 16px;/*320/20=16*/
          } } /*三星*/ @media screen and (width: 360px){ html { /*在360寬的屏幕中 一份是18px*/ font-size: 18px;/*360/20=18*/
          } } @media screen and (width: 375px){ html { /*在375寬的屏幕中 一份是18.75px*/ font-size: calc(375px/20);/*375/20=18.75*/
          } }

html中，加入一個div量出來height是90px,那麼應該這樣寫：

.box {
    /*90/32意思是這個尺寸在設計圖中佔了多少份*/
 height: 90/32rem;
}

我在工做中是這樣用的：

給一個750px的設計稿

（咱們這裏所說的750px並非絕對的，750px是iphone6的物理像素，也叫屏幕分辨率。因此這裏只是泛指移動端設計稿是按照設備的物理像素所給。）

物理像素：顧名思義，就是設備屏幕上的實際像素，也就是說這個手機被出廠造出來的時候，這個屏幕上有多少個像素點，它的物理像素就是多少。

設備獨立像素：也叫邏輯像素（對於前端來講，和咱們的css像素是同樣的），這個不一樣的設備是不同的。在viewport爲ideal-viewport模式時，如iphone6此時的viewport爲375排序，表明着咱們在css中寫375px就能夠達到全屏的效果。

在index.html中添加一段js代碼

<script>
      var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
      var isiOS = u.indexOf('iPhone') > -1; //ios終端
      if(isAndroid || isiOS) { var windowWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = windowWidth / 7.5 + 'px'; } else { var windowWidth = document.documentElement.clientWidth; if(windowWidth > 480) { document.documentElement.style.fontSize = 480 / 7.5 + 'px'; } else { document.documentElement.style.fontSize = windowWidth / 7.5 + 'px'; } } </script>

而後只須要將設計稿量出來的長度（px），小數點向左移2位，單位變成rem就行了。

還能夠這樣來寫，添加以下代碼

(function(){ function changeRootFont(){ var designWidth = 750,rem2px = 100; document.documentElement.style.fontsize=((window.innerWidth/designWidth)*rem2px) +'px';
                //iphon6: (375/750)*100 + 'px'
 } changeRootFont(); window.addEventListener('resize',changeRootFont,false); })();

能夠看到，咱們經過動態的獲取設備獨立像素，而後除以設計稿的寬度，而後賦給根字體的大小，以至來改變根字體大小，作到自適應。但至於爲何要乘100，首先375/750是0.5，瀏覽器默認最小字體爲12px,因此咱們須要放大一些，而100又很好算，而後只須要將設計稿量出來的長度（px），小數點向左移2位，單位變成rem就行了。

3、響應式佈局（使用媒體查詢這個工具實現）

簡而言之，就是一個網站可以兼容多個終端。

CSS3中的 Media Query（媒介查詢），經過查詢 screen 的寬度來指定某個寬

度區間的網頁佈局。它主要是經過查詢設備的寬度來執行不一樣的 css 代碼，最終達到界面的配置。核心語法是：

@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/
  /*你的css代碼*/
}

以下所示：

@media screen and (width: 320px){ body { background-color:red } } @media screen and (width: 375px){ body { background-color:green } }

因爲響應式開發顯得繁瑣些，通常使用第三方響應式框架來完成，好比bootstrap來完成一部分工做，固然也能夠本身寫響應式。

bootstrap中經常使用類名：

.col-xs-*超小屏幕（移動設備） 768px如下

.col-sm-*小屏設備 768px-992px

.col-md-*中等屏幕 992px-1200px

.col-lg-*寬屏設備 1200px 以上

4、flex彈性佈局

以天貓的實現方式進行說明：

它的viewport是固定的：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，寬度自適應，元素都採用px作單位。

隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體佈局差很少，在那個寬度須要調整的時候使用響應式佈局調調就行（好比網易新聞），這就實現了適配。