响应式设计

前言：在历史的某个时刻，设计网站时。有两个网站布局的方式。

流式布局：使用百分比来定义元素的宽度，高度，外边距，内边距等。
固定布局：使用像素来定义元素的宽度，高度，外边距，内边距等。

问题：流式布局在页面宽度小于元素宽度时，元素会溢出。固定布局在页面宽度大于元素宽度时，元素会留白。面对不同宽度的屏幕，上面的两种方式都不能很好的解决。

响应式设计（responsive web design，RWD）：根据不同的设备宽度，展示不同的页面布局。

响应式设计不是一个独立的技术，它是结合了流式布局、自适应图像、媒体查询等一系列技术的组合。

响应式设计的实现方式

媒体查询
流式布局（百分比布局）
多列布局（column-count）
flex布局
grid布局
自适应图像（max-width:100%或者使用<spicture>）
视口单位（vw/vh）

视口元标签

<meta name="viewport" content="width=device-width,initial-scale=1" />

这个元标签时告诉移动端浏览器，它们应该将视口宽度设定为设备宽度，将文档放大到其预期大小的100%。

为什么需要这个标签：

因为在iPhone发布后，移动端浏览器默认会将视口宽度设置为980px，这样在移动端浏览器中，页面会显得非常小。虽然可以放大但是这样在体验感非常差。而且还有个问题就是如果你有个窄屏布局，在480像素及以下的视口宽度生效，但是视口是按960像素设定的。那么在移动端你永远看不到你的窄屏布局。通过设定width=device-width，浏览器会根据设备的宽度来设定视口宽度，这样就可以看到窄屏布局了。

属性：

initial-scale：设置页面的初始缩放，默认值为1
height：特别为视口设置一个高度
minimum-scale：设定最小缩放级别
maximum-scale：设定最大缩放级别
user-scalable：如果设为no的话组织缩放

不过应该避免使用minimum-scale、maximum-scale，尤其是将user-scalabel设为no。

总结：响应式设计是指一个响应浏览环境的网页或网页设计。是由多种技术组合而成的。