媒体查询

首先看下百度百科对响应式布局定义
百度百科
怎么调试

Responsivator工具
官网
 git
safari自带

enter.png

detail.png

具体实现

viewport定义

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
width viewport宽度，为正整数或device-width
initial-scale 初始缩放值
maximum-scale 最大缩放值
minimum-scale 最小缩放值
user-scalable 是否允许缩放，为no或yes

@media不同分辨率下适配方法

html {
        font-size: 20px;
        background: red;
    }
    
    @media only screen and (min-width: 320px) {
        html {
            font-size: 10px;
            background: green;
        }
    }
    
    @media only screen and (min-width: 375px) {
        html {
            font-size: 11.8px;
            background: blue;
        }
    }
    
    @media only screen and (min-width: 414px) {
        html {
            font-size: 13px;
            background: yellow;
        }
    }

其中，rem是根元素(html)的字体大小。
另外，默认font-size: 20px是针对640px设计的。依次类推，得出其它分辨率下的的font-size。
最终，展示效果

iphonese.png

iphone6.png

6ps.png

Demo过程中发现的垂直居中技术点
设置line-height等于其元素高度

.btn {
        width: 6rem;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.2rem;
        display: inline-block;
        background: #06c;
        color: #fff;
        border-radius: .5rem;
        text-decoration: none;
        text-align: center;
    }
<div class="btn">确定</div>

弹性图片

弹性图片指的是不给图片设置固定尺寸，而是根据流体网络进行缩放，用于各种设备的尺寸。实现简单：

img {max-width: 100%;}

但在IE8上出现-图片失踪情况。解决方法如下：

使用background-image添加背景图片；
显示/隐藏父元素，给父元素使用不同的图片，然后通过媒体查询来控制显示或隐藏。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

@media (min-device-width: 600px) {
      img[data-src-600px] {
           content: attr(data-src-600px,url);
      }
}

@media (min-device-width: 800px) {
      img[data-src-800px] {
           content: attr(data-src-800px,url);
      }
}