一、viewport視口

1.1什麼是屏幕尺寸、屏幕解析度、屏幕像素密度？

屏幕尺寸：指屏幕的對角線的長度，單位是英寸，常見的屏幕尺寸有3.5、3.7、4.2、4.7、5.0、5.5、6.0等。

屏幕解析度：指在橫縱向上的像素點數，單位是px，1px=1個像素點。一般以縱向像素*橫向像素來表示一個手機的解析度，如1920*1080。（這裡的1像素指的是物理設備的1個像素點）

屏幕像素密度：屏幕上每英寸可以顯示的像素點的數量，單位是ppi。屏幕像素密度與屏幕尺寸和屏幕解析度有關，在單一變化條件下，屏幕尺寸越小、解析度越高，像素密度越大，反之越小。

iPhone 3GS和iPhone 4對比。屏幕尺寸一樣，屏幕解析度相差一倍，屏幕像素密度也相差一倍。

計算像素密度的公式：

在早先的移動設備中，屏幕像素密度都比較低，如iphone3解析度為320x480，在iphone3上，1像素是等於一個屏幕物理像素。後來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司推出了Retina屏，解析度提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，1像素是等於兩個物理像素。

這是描述物理性質的一個數值，表示電腦屏幕橫向有1366個像素髮光點，縱向有768個像素點。

像素是構成數位影像的基本單元，通常以像素每英寸PPI為單位來表示影像解析度大小。

上網的時候看網頁，物理解析度和網頁呈遞的效果，息息相關。

對於同一個網頁，不更改字型大小的情況，解析度越大，同樣字型大小看著越小。

把電腦解析度調大，設為1366*768，此時網頁旁邊的留白很多。

如果這個事，在手機上也是遵循同樣的規則，那壞了，手機屏幕的解析度，驚人的大。

做一個網頁，頁面上放一個1000px的盒子，放置了h1和p，都是預設字型大小，會發現h1哪像h1啊？

寫一個測試語句：手機認為自己的屏幕寬度是980px，註意這個數值，不是解析度。

現在，這個980是什麼？為什麼不是手機的解析度，這是預設視口的寬度。

視口（viewport）是手機web製作非常重要的概念，發明人是喬布斯，喬布斯預見到一件事，就是手機的屏幕會越來越清晰，PPI（每平方英寸的像素數，像素密度）會越來越大。此時如果手機按照自己的解析度去渲染網頁，頁面上的文字將不可讀，20px的文字看不清。所以，手機不能認為自己的寬度是自己的解析度！喬布斯說，每個手機可以由工程師自由的設置“顯示解析度”，起名叫“視口”。也就是說，手機在視口中呈遞頁面，而不是解析度的物理視窗。視口中1px等於真實物理的多個px。喬布斯說，預設視口980px，因為980px是實世界上絕大多數網頁的版心。此時剛剛好能夠卡住它們，像在3000米的高空俯視整個頁面。但是，喬布斯還說，前端工程師必須能夠自己設置。

寫一個meta標簽：此時手機認為自己的視口是device-width（當前設備）的視口寬度

此時手機會認為自己的視口是500px寬，稱這條語句“約束視口”

此時頁面文字變大了。

小米屏幕的物理解析度橫向1080個像素，而現在手機認為自己是500px的寬度，所以一個視口px等於2.16真實px。

把所有設備都約束為固定的視口寬度，不合理！比如小米6的解析度是1080，約束為500。iPhone8的解析度750，頁面約束為500，此時iPhone8的視口解析度1px等於真實解析度1.5px，加上iPhone8手機本來就小，iPhone8中的h1看的感覺要比小米6小，所以iPhone8應該認為自己有更小的視口，比如360，可以增加點視口，此時大家的h1不都一樣了嗎？

喬布斯規定，所有的手機出廠的時候，就有一個設備的補償視口寬度。叫做“出廠視口”，此時這個設備將在出廠的時候寫入一個視口寬度，這個寬度下看網頁，h1和h1感覺一致

完整的meta設置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

視口的值不要背，面試的時候也不用考，因為視口就是為了屏蔽手機和手機的不同而設置的值。視口的值，每個手機不一樣，正是因為手機和手機視口值不一樣，才讓手機看到的14px文字的感覺是一樣的。

視口的最終目的：屏蔽手機的尺寸、像素密度差異，讓任何手機中的文字看起來一樣大。

當你不寫meta的時候，此時視口980。寫了就是出場視口。就是320、360、414等等…… 永遠都得不到解析度。

1.2物理像素和設備獨立像素

window對象有一個devicePixelRatio屬性，它可以得到設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。

CSS中的px就可以看作是設備的獨立像素，所以通過devicePixelRatio可以知道該設備1px代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio值為2，也就是說1px相當於2個物理像素。

iPhone6屏幕解析度是1334*750px，所以繫數是2x。那device-width就等於750/2=375px。

iPhone6 Plus屏幕解析度是2208*1242px，所以繫數是3x。那device-width就等於1242/3=414px。

二、移動端百分比佈局

2.1移動端頁面沒有版心

手機web頁面沒有版心，都是撐滿的，因為：

1、手機本身就小，如果再留白，寸土寸金的地方就浪費

2、APP也是撐滿的，用戶手機上網的時候，也希望能看到更多的內容，所以撐滿。

此時沒有版心，都是100%，就會給製作帶來難度，因為尺寸不能寫px單位了，如果版心設置為360px，此時iPhone7 plus的414視口會看見留白。

2.2百分比佈局

用百分比佈局設置寬度、高度（絕大多數高度可以用px）、padding、margin的佈局。叫做流式佈局，頁面有彈性，所以也叫彈性佈局：

下麵講解基本功：

小題目：

請問p多寬？此時p應該是300px寬度，因為無視父親的padding。

看看padding，都參考父親的width。註意，豎直方向上的padding也是看父親的width，而不是height。

小題目：

<div>
    <p></p>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}
p{
   width:50%;
   height:100px;
   padding-left:10%;
   paading-right:10%;
   padding-top:10%;
   padding-bottom:10%;
}

請畫出p此時的盒模型圖。

div的padding是逗你的，因為壓根沒用，兒子的padding-left如果用百分比寫，表示的仍然是父親的width屬性的百分之多少。兒子的padding-top和padding-bottom也是參考父親的width，所以答案：

小題目：

div{
    width: 794px;
    height: 200px;
    border: 1px solid #000;
    padding: 124px 34px 34px 23px;
}
p:nth-child(1){
    float: left;
    width: 30%;
    padding: 10% 20% 30%;
    height: 50px;
    background-color: orange;
}
p:nth-child(2){
    float: left;
    width: 30%;
    height: 50px;
    background-color: blue;
}       

請問藍色盒子和橙色盒子是否能夠浮動成功，是否能夠併排顯示。

答案： 計算1號p，總寬度是30% + 20% + 20% = 70%。 2號p總寬度30%，剛好能併排。

再來看margin，一律參考父親width，不參考父親的margin和height。

div{
    width: 200px;
    height: 600px;
    border: 10% solid #000;
}
p{ margin: 10%;}

總結：無論margin、padding、width、height，無論豎直方向還是水平方向，參考的都是父親的width。

2.3 calc()函數

calc()的運算規則

calc()使用通用的數學運算規則，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四則運算；

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表達式中有“+”和“-”時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。

border不能用百分比寫。所以會帶來麻煩：

p就不能浮動成功，因為總寬度已經是100%，又多了4個px。

此時邊框不能寫成百分百，所以就不好減。

div{
    width: 500px;
    height: 300px;
    background: orange;
}
div p{
    width: 50% /*這裡不能輕鬆減去2px*/
    height: 200px;
    float: left;
    background: green;
    border:1px solid #000;
}

但是CSS3中新增的calc函數能：

div{
    width: 500px;
    height: 300px;
    background: orange;
}
div p{
    width: calc(50% - 2px); /*css3中新增了calc函數*/
    height: 200px;
    float: left;
    background: green;
    border:1px solid #000;
}

使用的時候一定要在運算符前後加上空格：

正確的應該是：

對於相容性不好的瀏覽器，要加首碼：

相容性不好，至少安卓4.4還不是特別相容。

2.4 CSS3新的盒模型（盒子內減）

之前的盒模型padding、border、都是外擴的。

在CSS3中新添加一個屬性box-sizing:border-box;盒子最終的大小都是以width和height為準，padding和border不會影響盒子大小。

div{
    width: 200px;
    height: 200px;
    padding:10px 20px 30px 40px;
    border:10px solid #ccc;
    background: orange;
}

此時真實的面積：280*260

div{
    width: 200px;
    height: 200px;
    padding:10px 20px 30px 40px;
    border:10px solid #ccc;
    background: orange;
    box-sizing:border-box;
}

加上內減屬性後，此時padding和border是內減的，而不是外擴。

小題目：

兩個p能否併排：

div{
      width: 800px;
      height: 300px;
      border: 1px solid #000;
}
p:nth-child(1){
      float: left;
      width: 500px;
      height: 300px;
      background: blue;
      padding: 21px 33px 44px 11px;
      box-sizing:border-box;  → width：500px涵蓋了padding和border了
      border:3px solid red;
      border-right:4px solid black;
}
p:nth-child(2){
      float: left;
      width: 300px;
      height: 300px;
      background: orange;
      padding: 14px 22px 17px 21px;
      box-sizing:border-box; → width：300px涵蓋了padding和border了
      border:5px solid red;
      border-right:4px solid black;
}     

小案例：響應佈局

div{
      width:80%;
      height:100px;
      margin:0 auto;
      background-color:#111;
      padding:10px;
      padding-right:0px;
    }
div p{
      float: left;
      width:33.3333333%;
      height:100px;
      background-color:deeppink;
      border-right:10px solid #111;
      box-sizing:border-box;
    }

小題目：div裡面一個p

div{
   width:600px;
   height: 200px;
   padding:50px;
   box-sizing:border-box;
}
p{width:50%;height: 200px;}

P的寬度是250px因為父親有box-sizing:border-box;屬性，內減了padding:50px，兒子參考的是父親真實能用的面積的百分比（500px）.

2.5最大和最小限定

超過這個範圍，百分百就不再縮放了。

2.6固比固

思考一個案例：有三個盒子併排撐滿父親，兩邊的盒子固定120px，中間的盒子撐滿剩餘部分。

難點就是中間的盒子百分百，寫啥都不對，因為它不知道去掉240px之後，占父親多少百分比。

三、高度的等比變化

難度主要在參考值不統一，width參考是父親的width，height參考父親的height。

3.1插入圖片法

一般來說，需要高度等比例變化的盒子，都是攜帶圖片的，因為不希望圖片變形，所以盒子要等比例變化。

而img標簽天生具有等比例的性質。盒子約束圖片的寬度，圖片反著影響盒子的高度。

比如現在要製作三個1:1:1的盒子併排，並且他們的寬高比都是1:1，也就是正方形。

<div>  → width:80%; overflow:hidden; padding-left:5px;
         <p>  → float:left;width:33.33%;border-right: 5px
             <img src="images/yangyang.png" > → width:100%;height:auto; 
         </p>
         <p> → float:left;width:33.33%;border-right: 5px
             <img src="images/liyifeng.png"> → width:100%;height:auto;
         </p>
         <p>  → float:left;width:33.33%;border-right: 5px
             <img src="images/xiaoming.png"> → width:100%;height:auto;
         </p>
 </div>

div{
    width: 80%;
    margin: 0 auto;
    border: 1px solid #000;
    overflow: hidden;
    padding-left: 6px;
    box-sizing:border-box;
}
div p{
    float: left;
    width: 33.3333%;
    border-right: 6px solid white;
    box-sizing:border-box;
}
div p img{
    width: 100%;
    height: auto;
}

現在升級：

div p:nth-child(1){
    width: 66.666%;
    border-right: 1px solid black;
}
div p:nth-child(2){
    width: 33.333%;
    border-bottom: 1px solid black;
}
div p:nth-child(3){
    width: 33.333%;
}

圖片撐高了盒子，盒子本身沒有高度，盒子的高度相當於是圖片的高度加1px邊框，即使寫了border-box也沒用也是圖片的高度加1px邊框。

3.2 padding法將圖片放在padding裡面

豎直方向的padding參考的是父親的width，padding的參考和width的參考統一了，所以就能夠製作高度等比例變化的盒子了！

盒子的高度是0，全靠padding來撐！

比如製作三個併排，每個盒子寬高比1:1的盒子此時：

比如製作五個併排，每個盒子寬高比2:1的盒子此時

padding法也可以插img，但是img要在height為0的容器中，所以img必須絕對定位，飄在父親的padding中。

div p{
    float: left;
    width: 33.333%;
    padding-top: 33.333%;
    height: 0px;
    border-right: 1px solid #000;
    box-sizing:border-box;
    position: relative;
}
div p img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

升級：

div{
    width: 80%;
    overflow: hidden;
    border: 1px solid #000;
    margin:10px auto;
}
div p:nth-of-type(1){
    width: 66.666%;
    padding-top: calc(66.6666% + 10px);
    border-right:5px solid #000;
}
div p:nth-of-type(2){ border-bottom:10px solid #000;}
div p{
    float: left;
    height:0;
    width: 33.333%;
    padding-top:33.3333%;
    box-sizing:border-box;
    position: relative;
}
div p img{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

四、CSS3彈性盒模型

4.1彈性盒佈局屬性display:box;和display:flex;

註意：設為flex佈局後，子元素的float、clear、vertical-align屬性將失效。

需求：讓三個盒子併排，撐滿父親，而且它們的寬度是1:2:3，此時一個專門設置width？

解：總份數1+2+3等於6，所以一份就是100/6 = 16.6666%，所以應該：16.6666%、33.3333%、50%

再來一個盒子，四個盒子併排撐滿父親，比例是：1:2:6:3

解：總份數是12，是一樣一份是8.333333333333334.答案：8.3333%、16.66%、50%、25%

CSS3中新推出一個屬性，彈性盒容器：

<div>  → display:-webkit-box;  此時這個div就是彈性盒容器，裡面的親兒子自動浮動
    <p>