要说到”响应式布局设计”，我们先来介绍一下另外一个名词：”自适应网页设计”（Responsive Web Design），最早是Ethan Marcotte在2010年提出的。指的是可以自动识别屏幕宽度、并对页面的布局会基于一定的因素搭建做出相应调整的网页设计。自适应布局能够提供一种更加实用的解决方案，使得项目的实现成本更低，并且更加易于测试。自适应布局可以被看作是响应式布局的一个更加廉价的替代品，换句话说自适应网页设计就是一个精简版的响应式布局。当固定宽度与流动宽度结合起来时，自适应就变成了响应式，响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询），响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

实现方法

这里有2个关键点：如何在不修改Dom结构的前提下调整布局，如何判断屏幕分辨率并应用对应的CSS。且这两点都应该不依赖与JS。

使用CSS3 Media Queries（媒介查询）

根据不同的屏幕分辨率，选择应用不同的Css规则

基本使用

/* 当屏幕分辨率小于等于400px时，会立即套用以下样式 */
@media screen and (max-width:400px){ 
    .class  {
        background:#ccc; 
    }
}
/* 当屏幕分辨率大于等于800px时，会立即套用以下样式 */
@media screen and (min-width:800px){
    .class  {
        background:#666;
    }
}
/* 当屏幕分辨率x>=800px和600px>=x>=520px区间时，会立即套用以下样式 */
@media screen and (max-width: 600px) and (min-width: 520px), (min-width: 800px){
   .class  {
        background:#ff0;
    }
}

link标签引入

/* 设备屏幕的输出宽度Device Width小于400px时，会立即套用style.css样式 */
<link rel="stylesheet" href="style.css" media="screen and (max-width:400px)" type="text/css">

/* 专门针对iPhone4 */
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

/* iPad 在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。 */
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

/* Android设备 */
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

网页添加 viewport meta 标签

在网页html head 中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

该属性可以控制视窗口宽度的大小。viewport设置属性如下：

  • width：可设定数值，或者指定为 device-width

    device-width ，主要是为了让整个页面宽度与手机可视宽度相同，这样就可以简单相容于不同机型屏幕大小，如果这边width沒有设定的话，就会依照html/css给予的width当作预设值。

  • height：可设定数值，或者指定为 device-height
  • initial-scale：第一次进入页面的初始比例
  • minimum-scale：允许缩小最小比例
  • maximum-scale：允许放大最大比例
  • user-scalable：允许使用者缩放，1 or 0 (yes or no)

如果希望在不同device使用不同缩放大小，就必须使用javascript，检测UA(User agent)，动态设定viewport，如下：

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

流动布局

float

流动布局的含义是各个位置都是浮动的，不是固定不变的

.main { float: right; width: 70%; } 
.leftBar { float: left; width: 25%; }

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。详细内容参见css之flex布局

流式媒体

img, video, canvas {
  max-width: 100%;
}

要使媒体按等比缩放，一般不需要规定媒体高度。且图片最好不用background-image,因为这样不会按照等比缩放。

其他

不使用绝对宽度

不能使用绝对宽度（margin-left:5px）的布局，也不能使用具有绝对宽度(例如：width：200px)的元素,而最好使用百分比宽度width:20%;或者with:auto;

字体单位

不使用绝度单位px，最好使用rem（参考<html>的字体大小、全局性、CSS3）、em(参考父元素的字体大小)。

html { font-size: 100%; } 
/*上面的代码指定，字体大小是页面默认大小的100%，即16像素。*/

h1 { font-size: 1.5rem; }  
/*h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）*/

.small { font-size: 0.875rem; } 
/*small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）*/

普通元素的栅格布局

对于普通的div布局，使用了通用简单的栅格布局，相信这个大家都知道原理：

.row{
  width: 100%;
}
.row .col-1 {
  width: 8.33333333333%
}

/* ...比较多，这里省略 */

.row .col-12 {
  width: 100%
}

参考