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