移动端要点

1.完整的meta设置：

width=device-width 约束视口为出厂视口
initial-scale=1.0 默认视口1.0倍
minimum-scale=1.0 允许最小的视口1.0倍
maximum-scale=1.0 允许最大的视口1.0倍
user-scalable=no 不允许用户缩放视口
2.百分比布局：
1).子盒子占父盒子的百分比，无视父盒子的padding
比如：

<div>
    <p></p>
</div>
div{width:600px;padding-left:100px;}
p{width:50%;}

此时p应该是300px宽度，因为无视父亲的padding。
2). 而padding，都参考父亲的width。注意，竖直方向上的padding也是看父亲的width，而不是height。
例如：

<div>
    <main></main>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}

padding全都是父盒子宽度的百分之多少

p{
   width:50%; //400px
   height:100px;   
   padding-left:10%;  //80px
   paading-right:10%; //80px
   padding-top:10%; //80px
   padding-bottom:10%;  80px
}

3）.margin，一律参考父亲width，不参考父亲的margin和height。
例如：

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

总结： 无论margin、padding、width、height，无论竖直方向还是水平方向，参考的都是父亲的width。 4）边框带来的麻烦。 因为边框不能用百分比来写，所以会带来麻烦。

1

→ float: left;width:50%; border:1px solid red;

2

→ float: left;width:50%; border:1px solid red;

p就不能浮动成功，因为总宽度已经是100%多了4个px。 此时边框不能写成百分比，所以就不好减！

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            width: 50%;→ 这里不能轻松减去2px
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

解决方法：CSS3中增加了calc函数：

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            **width: calc(50% - 2px);→ CSS3中增加了calc函数**
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

5).原来的盒模型都是外扩的有了padding和margin之后，css3新的盒模型，加上box-sizing: border-box;属性，盒模型就是内减的，这个属性兼容性很好，兼容到IE8，其他高级浏览器都兼容。
6）新的弹性盒属性display:box;和display:flex;
当div设置了display:box;的时候，子盒子自动就会并排！不要写浮动，写了浮动反而出错。
浏览器会自动检测总份数，每个份数占多少，你自己占了几份。不用需要计算8.3333%、16.666%了。这个属性能够颠覆百分比写法！CSS中从此不出现百分号了。并且这个属性足够优秀，margin能够自动减去，border也能自动减去。
这个属性还有一个分支display:flex;给父盒子添加的属性。
可以使用flex-direction来设置方向，值有四个：row、row-reverse、column、column-reverse；
flex-wrap : wrap;来设置自动换行；
设置对齐方式：justify-content:flex:end;justify-content:flex:space-between;，justify-content:flex:space-around;
设置顺序：

<div>
    <p>A</p>  → order:5;
    <p>B</p>  → order:1;
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>  → order:2
</div>

flex-grow属性当空间多余是否外延：1是 0否（默认）
flex-shrink属性当空间不足是否缩小：1是（默认） 0否
用flex-basis:25%;属性表示占有多少面积，和width一致。
7)固比固：
三个盒子并排撑满父亲，两头的盒子固定120px尺寸，中间的盒子撑满剩余部分。
方法1：

<div>→ 相对定位，携带padding
    <p>A</p> → 绝对定位，top:0;left:0;
    <p>B</p>→ width:100%;
    <p>C</p>→ 绝对定位，top:0;right:0;
</div>

方法2：在display:-webkit-box;

<div>→ display:-webkit-box;
    <p>A</p> → width:120px; 没有box-flex属性
    <p>B</p>→  -webkit-box-flex:任意数值。
    <p>C</p>→ width:120px; 没有box-flex属性
</div>

8）高度的等比例变化：
a.插入图片法:
一般来说，需要高度等比例变化的盒子，都是携带图片的，因为不希望图片变形，所以盒子要等比例变化。
而img标签天生具有等比例的性质。盒子约束图片的宽度，图片反着影响盒子的高度。
比如现在要制作三个1:1:1的盒子并排，并且他们的宽高比都是1:1，也就是正方形。

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

图片的height会算出小数，但是盒子不会自动撑满为小数，此时会有白边，最简单的方法就是给img加上一个vertical-align: middle;属性和overflow:hidden;
b.padding法，将图片放在padding里面;

<div>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
</div>

竖直方向的padding参考的是父亲的width，所以padding的参考和width的参考统一了，所以就能够制作高度等比例变化的盒子了！
盒子高度设置为0，width:33.3%;padding-top:33.3%;这两个参考的都是父盒子的宽度，所以值是一样的，然后再给子盒子设置width:100%;height:100%;

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

c).CSS3中增加了rem单位，是绝对单位，表示html根元素的字号的多少倍。
rem的使用：首先增加根字号

html{
 font-size: 20px;
 }

<script type="text/javascript">
    set();

    window.onresize = set;

function set(){
            //窗口此时的宽度
var windowWidth = document.documentElement.clientWidth;
            //倍数
var rate = windowWidth / 600;
            //设置此时的字号
document.documentElement.style.fontSize = 20 * rate + "px";
}
</script>
<script type="text/javascript">
function setHTMLFontSise(){
var windowWidth = document.documentElement.clientWidth;
//判断视口宽度是不是已经大于了最大版心
if(windowWidth > 540){
document.documentElement.style.fontSize = "20px";
}else if(windowWidth < 320){
document.documentElement.style.fontSize = 320 / 540 * 20 + "px";

}else{
document.documentElement.style.fontSize =  windowWidth / 540 * 20 + "px";
}

}

window.onresize = setHTMLFontSise;
setHTMLFontSise();
</script>

背景定位、background-size都能够用rem写：

.logo{
    border: 1px solid #000;
    width: 5rem;
    height: 4rem;
    background: url(images/icons.png) no-repeat -8rem -3rem;
    background-size: 15rem 10rem;
 }

9)移动端注意事项：
手机中的图片一般都要缩小2倍~3倍使用，这样可以充分利用手机的高清屏幕，让图片更清晰。
10）文字溢出自动省略号
单行省略号：

div{
            /*溢出加省略号*/
            text-overflow:ellipsis;
            /*设置文本不换行，即使横向溢出，也不换行*/
            white-space: nowrap;
            /*隐藏*/
            overflow: hidden;
        }

多行省略号，五个属性缺一不可：

section{
            /*溢出加省略号*/
            text-overflow:ellipsis;
            /*隐藏*/
            overflow: hidden;
            /*必须自己是弹性盒*/
            display: -webkit-box;
            /*设置行数是3行*/
            -webkit-line-clamp: 3;
            /*垂直排列*/
            -webkit-box-orient: vertical;
        }