web响应式开发指南

响应式网页设计，是在最近几年风靡一时，人们大多只是在不停的念叨，但是很少有人去神探讨论

响应式网站设计中媒体查询的断点不应该由具体的设备来决定，而是应该有设计稿来决定，我们的网站展示在不同的屏幕，展示成不同的样子

有一些建议，可以避免出现不必要的媒体查询

1. 使用百分比长度来取代固定长度，如果实在做不到这一点，也应该尝试使用与视口相关的单位（vw，vh，vmin，vmax），他们的值解析为视口的宽度或高度的百分比

2. 在大屏幕下得到固定宽度时，可以使用max-width而不是width，它可以适应小屏幕

3. 不要忘记替换元素(img, object, video, iframe) 等设计一个max-width 值为100%

4. 背景图片需要完整地铺满一个小容器，不管容器的尺寸如何变化，background-size: cover这个属性都可以做到，但是，我们也要时刻牢记，带宽并不是无限的，在移动网页中不能把一张大图缩小显示往往不太明智

5. 当图片以行列式进行布局，让视口的宽度来决定列的数量，弹性布局 或者display：inline-block加上常规的文本折行行为，都可以实现这一点

6. 在使用多列文本时，指定column-width 而不是指定 column-count 这样它就可以在较小的屏幕下自动显示为单列布局

响应式总体思路是： 最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸

做代码结构布局时，我们的布局代码，本身应该满足，弹性可伸缩的，做响应式，优化网页在小屏幕上的表现，其实只意味把一些外边距收拢到最小程度，然后把因为屏幕太窄而无法显示成双列的侧栏调整为单列布局而已