响应式布局

整体
1.

//移动端适配
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

2.

<!--[if lte IE 8]>
<p>您的浏览器版本过低，请到<a href="http://www.baidu.com">这里</a>更新</p>
<![endif]-->

3.

//这里的em是针对浏览器的 google默认12px
//小于30em
@media only screen and (max-width: 30em){
       header .top ul li a{
           color: red;
       }
}
//之间30em~50em
@media only screen and (min-width: 30em) and (max-width: 50em){

    header .top{
        background-color: green;
    }
}
//大于50em
@media only screen and (min-width: 50em){
    header .top ul li a{
        color: blue;
    }
}

图片
方法一：

方法二：

如果视口宽度 默认不是100% 而是50% 就需要加上sizes来适应
注意：100vm表示 视图宽度是100%
sizes 前面是媒体查询 逗号 后面是不满足条件的显示方式

方法三：

方法四：
使用SVG

总结：使用picturefill 库 最好,解决了兼容性问题