【轉載】前端筆記之移動端&響應式（中）視口&百分比佈局&彈性盒模型&rem&fillpage

時間 2019-11-09

標籤轉載前端筆記移動響應百分比佈局彈性模型 rem&fillpage rem fillpage 欄目無線简体版

原文原文鏈接

1、viewport視口

1.1什麼是屏幕尺寸、屏幕分辨率、屏幕像素密度？

屏幕尺寸：指屏幕的對角線的長度，單位是英寸，常見的屏幕尺寸有3.五、3.七、4.二、4.七、5.0、5.五、6.0等。javascript

屏幕分辨率：指在橫縱向上的像素點數，單位是px，1px=1個像素點。通常以縱向像素*橫向像素來表示一個手機的分辨率，如1920*1080。（這裏的1像素指的是物理設備的1個像素點）css

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

iPhone 3GS和iPhone 4對比。屏幕尺寸同樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。前端

計算像素密度的公式：vue

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

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

像素是構成數碼影像的基本單元，一般以像素每英寸PPI爲單位來表示影像分辨率大小。node

上網的時候看網頁，物理分辨率和網頁呈遞的效果，息息相關。react

對於同一個網頁，不更改字號的狀況，分辨率越大，一樣字號看着越小。jquery

把計算機分辨率調大，設爲1366*768，此時網頁旁邊的留白不少。

若是這個事，在手機上也是遵循一樣的規則，那壞了，手機屏幕的分辨率，驚人的大。

iPhone8的分辨率1334*750

iPhone8 Plus分辨率1920*1080

三星S8的分辨率2960*1440

小米6的分辨率1920*1080

作一個網頁，頁面上放一個1000px的盒子，放置了h1和p，都是默認字號，會發現h1哪像h1啊？

寫一個測試語句：手機認爲本身的屏幕寬度是980px，注意這個數值，不是分辨率。

document.getElementsByTagName('h2')[0].innerHTML=document.documentElement.clientWidth;

如今，這個980是什麼？爲何不是手機的分辨率，這是默認視口的寬度。

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

寫一個meta標籤：此時手機認爲本身的視口是device-width（當前設備）的視口寬度

width 設置layout viewport 的寬度，爲一個正整數，或字符串"device-width"

initial-scale 設置頁面的初始縮放值，爲一個數字，能夠帶小數

minimum-scale 容許用戶的最小縮放值，爲一個數字，能夠帶小數

maximum-scale 容許用戶的最大縮放值，爲一個數字，能夠帶小數

height 設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用

user-scalable 是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許||IOS10 無效

此時手機會認爲本身的視口是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感受一致

出廠視口	品牌
320	iPhone四、iPhone5
360	華爲P9，小米五、6等等中國國產的手機一概都是360，實際上不合理。
375	iPhone六、iPhone七、iPhone8
414	iPhone6 plus、iPhone7 plus、iPhone8 plus

完整的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、移動端百分比佈局

2.1移動端頁面沒有版心

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

一、手機自己就小，若是再留白，寸土寸金的地方就浪費

二、APP也是撐滿的，用戶手機上網的時候，也但願能看到更多的內容，因此撐滿。

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

2.2百分比佈局

用百分比佈局設置寬度、高度（絕大多數高度能夠用px）、padding、margin的佈局。叫作流式佈局，頁面有彈性，因此也叫彈性佈局：

下面講解基本功：

<body>

<div></div> → div是body的親兒子，60%指的是窗口寬度的60%

</body>

<body>

<div>

<p></p> → 60%指的是div的width的60%，無視div的padding。

</div>

</body>

小題目：

<div>

<p></p>

</div>

div{width:600px;padding-left:100px;}

p{width:50%;}

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

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

<div>

<p></p> → padding-left:10%;指的是父親的width的10%，而不是父親的padding。

padding-top:10%;指的是父親的width的10%，而不是父親的height。

</div>

小題目：

<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>

<p></p>

</div>

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不能用百分比寫。因此會帶來麻煩：

border: 10% solid #000;

<div>

<p>1</p> float: left;width:50%; border:1px solid red

<p>2</p> float: left;width:50%; border:1px solid red

</div>

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;
}

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

calc(50%-2px);

正確的應該是：

calc(50% - 2px);

對於兼容性很差的瀏覽器，要加前綴：

width:-moz-calc(100% - (10px + 5px) * 2);

width:-webkit-calc(100% - (10px + 5px) * 2);

width:calc(100% - (10px + 5px) * 2);

兼容性很差，至少安卓4.4還不是特別兼容。

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

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

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

box-sizing:border-box; 盒子內減模式

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是內減的，而不是外擴。

小題目：

<div>

<p></p>

</div>

兩個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最大和最小限定

width:80%;

max-width:800px; /*限定最大縮放寬度爲800*/

min-width:400px; /*限定最小縮放寬度爲400*/

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

2.6固比固

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

難點就是中間的盒子百分百，寫啥都不對，由於它不知道去掉240px以後，佔父親多少百分比。

width:calc(100% - 240px);

3、高度的等比變化

難度主要在參考值不統一，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的盒子此時：

float: left;

width: 33.333%;

height: 0px;

padding-top: 33.333%;

好比製做五個並排，每一個盒子寬高比2:1的盒子此時

float: left;

width: 20%;

padding-top: 10%;

height: 0px;

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%;
}

4、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中新推出一個屬性，彈性盒容器：

display:box;

display:-webkit-box;

<div>  → display:-webkit-box;  此時這個div就是彈性盒容器，裏面的親兒子自動浮動
    <p>1</p>  → -webkit-box-flex:1;  佔1份
    <p>2</p>  → -webkit-box-flex:2;  佔2份
    <p>3</p>  → -webkit-box-flex:6;  佔6份
    <p>4</p>  → -webkit-box-flex:3;  佔3份
</div>

注意：當div設置display:box;的時候，兒子自動會並排，兒子不要寫浮動，寫了反而出錯。

瀏覽器會自動檢測總份數，每一個份數佔多少百分比，不用計算百分比是多少，這個屬性能顛覆百分比的寫法。

CSS中今後能夠不寫百分比，而且這個屬性足夠魯棒，margin和padding、border也能自動減去。

可是這個屬性兼容性很差，由於是新出的屬性，安卓4.4纔開始兼容。

實際上這個屬性還要一個分支，就是display:flex;

要加前綴：這個屬性的哲學就是能夠自由的設置元素在容器中的排列形式。

display:flex;

display:-webkit-flex;

兼容寫法：

display:box;

display:-webkit-box;

display:flex;

display:-webkit-flex;

基本使用：

<div>  → display:flex;
        <p>A</p> → flex:1; 不要寫浮動！！
        <p>B</p> → flex:2; 不要寫浮動！！
        <p>C</p> → flex:2; 不要寫浮動！！
        <p>D</p> → flex:1; 不要寫浮動！！
</div>

4.2父級容器屬性

●flex-direction屬性

該屬性能夠設置方向（即子項目的排列方向）。

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

1 row（默認值）：主軸爲水平方向，起點在左端。

2 row-reverse：主軸爲水平方向，起點在右端。

3 column：主軸爲垂直方向，起點在上沿向下。

4 column-reverse：主軸爲垂直方向，起點在下沿向上。

div{
     width: 800px;
     height: 400px;
     margin:10px auto;
     border: 1px solid #000;
     display:flex;
     flex-direction:row-reverse;
 }

●flex-wrap屬性

默認狀況，項目都排在一條線（又稱「軸線」）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

1 nowrap（默認）：不換行。

2 wrap：換行，第一行在上方。

3 wrap-reverse：換行，第一行在下方。

●flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box {

flex-flow: <flex-direction> || <flex-wrap>;

}

flex-flow:row-reverse wrap;

●justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸爲從左到右。

1 flex-start（默認值）：左對齊

2 flex-end：右對齊

3 center：居中

4 space-between：兩端對齊，項目之間的間隔都相等。

5 space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

●align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;

}

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

1 flex-start：交叉軸的起點對齊。

2 flex-end：交叉軸的終點對齊。

3 center：交叉軸的中點對齊。

4 baseline: 項目的第一行文字的基線對齊。

5 stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

●align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {

}

1 flex-start：與交叉軸的起點對齊。

2 flex-end：與交叉軸的終點對齊。

3 center：與交叉軸的中點對齊。

4 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

5 space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

6 stretch（默認值）：軸線佔滿整個交叉軸。

4.3子級項目屬性

●order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.item { order:1; }

●flex-grow屬性

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

若是全部項目的flex-grow屬性爲1，則它們將等分剩餘空間（若是有的話）。

若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

.item {

flex-grow: <number>; /* default 0 */

}

●flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。(數值越大壓縮的越厲害)

.item {

flex-shrink: <number>; /* default 1 */

}

●flex-basis屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

.item {

flex-basis: <length> | auto; /* default auto */

}

●flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.item {

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}

.item {

flex: 1//平分剩餘的部分

}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

●align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

.item {

}

4.4多行文字溢出自動顯示的省略號

/*溢出隱藏*/
overflow: hidden;
/*溢出顯示省略號*/
text-overflow:ellipsis;
/*必須是彈性盒模型*/
display:-webkit-box;
/*設置行數是5行*/
-webkit-line-clamp:5;
/*垂直排列*/
-webkit-box-orient:vertical;

5、rem單位

注意：瀏覽器默認的字號大小是16px。

em是相對單位，相對於父親的字號的多少倍。

<div> → 字號20px

<p></p> → 字號2em ，也就是字號40px

</div>

em是相對單位，好比下面的div、p都設置2em，表示的字號卻不同大：

<body> → 字號20px

文字

<div> → 字號2em ，也就是字號40px

文字

<div>文字</div> → 字號2em ，也就是字號80px

</div>

</body>

CSS3中新增了rem單位，是相對單位，相對於html根元素的字號大小的多少倍。

rem被中國人開發出來能夠作移動端，方法就是用rem寫一切的單位，多用於移動端佈局。

rem使盒子可以有彈性的感受，原理：屏幕寬度是設計稿的多少倍，就要設置html字號基準字號是多少倍

html{

font-size:75px;

}

這個數值一旦肯定了，不要輕易改，由於後面全部的數值都以這個75px基準來算rem的值。

動態設置視口和rem單位

var dpr = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+dpr+'" />');
var W = document.documentElement.clientWidth / 10;
document.getElementsByTagName('html')[0].style.fontSize = W + 'px';

6、手機web製做其餘事項

6.1移動端的字體

移動端web中的字體，不用去設置，移動端的字體都會自動根據當前設備的系統進行替換，好比iPhone手機會自動換成蘋方字體，安卓系統會使用思源。

6.2移動端經常使用meta和link

http://blog.csdn.net/faremax/article/details/70241877

6.3圖片

手機中的圖片通常都要縮小2倍~3倍使用，這樣能夠充分利用手機的高清屏幕，讓圖片更清晰。好比，上屏幕的圖片是60*60，原圖就要有120*120以上。

由於視口好比360，真實手機分辨率是1080，大約2~3倍。也就是說你的視口1px，實際物理像素2~3個像素點，因此圖片可以顯示更清晰。

當你如今的盒子高度是固定尺寸的，並不須要等比例變化，此時精靈圖片通常都是用到的尺寸2.0倍，這是爲了好算。

7、fillpage.js

使用說明：

①引入插件文件，這個插件依賴於jQuery，因此你還須要下載jQuery，而且在Fullpage插件以前引入。

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" />
<script src="/fullpage/jquery.min.js"></script>
<script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>

若是你須要自定義頁面滾動的效果，你須要引入jquery.easings.min.js文件。

②編寫HTML代碼

<div id="fullpage'">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

假如你須要讓某一個section做爲首頁的第一屏展現，你只須要給這個section添加一個active的類，Fullpage會自動優先展現這個屏幕，例如定義下面的代碼：

<div class="section active">Some section</div>

Fullpage自帶左右滑動的幻燈片，只須要在section中添加DIV元素，而且給DIV元素添加slide類，FUllpage會自動生成幻燈片特效，例以下面的代碼：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

③初始化Fullpage

使用jQuery的文檔加載完畢之後執行函數，初始化Fullpage插件。

$(document).ready(function() {

$('#fullpage').fullpage();

});

8、注意事項

移動端初始化meta：

<meta name="viewport" content="width=device-width, initial-scale=1" id="viewport" />
<!-- 是否啓動webapp功能，會刪除默認的蘋果工具欄和菜單欄。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 這個主要是根據實際的頁面設計的主體色爲搭配來進行設置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略頁面中的數字識別爲電話號碼,email識別 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">

移動端注意事項：

一、樣式初始化要使用移動端初始化。
二、無需設置字體成微軟雅黑或平方，由於每一個手機系統的字體都不一樣。
三、盒子水平方向的儘可能都使用寬度百分比佈局。
四、並列模塊中間的邊框，儘可能用僞標籤，而且定位。
五、移動端網頁必定要有視口標籤。（咱們經過JS建立）

Safari(還有些webkit android手機瀏覽器)會自動對看起來像是電話號碼的數字串（包括已經加入連字符或括號格式化過的）添加電話連接，點擊以後會詢問用戶是否想要撥打該號碼。

如須要
<a href="tel:12345678901">電話</a>
<a href="mailto:978442663@qq.com">郵箱</a>

儘可能讓它愈來愈規範，這些文章都是本人的學習時的筆記整理，但願看完後能夠指點一二，提提意見多多交流，自由轉載-非商用-非衍生-保持署名。筆記流程：html>css>javascript>jquery>html5/css3>移動端>ajax>面向對象>canvas>nodejs>es678>vue>react>小程序