响应式布局小结

根据维基百科定义：弹性网格布局、弹性图片和媒体查询整合起来，并将其命名为RWD（Responsive Web Design，响应式布局）。下面分别介绍：

媒体查询

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

1. Responsivator工具
   官网
   git

2. safari自带

   
   
   

   enter.png

detail.png

• 具体实现

1. viewport定义

width viewport宽度，为正整数或device-width
initial-scale 初始缩放值
maximum-scale 最大缩放值
minimum-scale 最小缩放值
user-scalable 是否允许缩放，为no或yes

2. @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;
    }
确定

弹性图片

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

img {max-width: 100%;}

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

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

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

弹性网格布局

这块内容较多，在其他文章涉及。