web响应式开发指南 web响应式开发指南

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

响应式网站设计中媒体查询的断点不应该由具体的设备来决定，而是应该有设计稿来决定，我们的网站展示在不同的屏幕，展示成不同的样子
有一些建议，可以避免出现不必要的媒体查询

使用百分比长度来取代固定长度，如果实在做不到这一点，也应该尝试使用与视口相关的单位（vw，vh，vmin，vmax），他们的值解析为视口的宽度或高度的百分比
在大屏幕下得到固定宽度时，可以使用max-width而不是width，它可以适应小屏幕
不要忘记替换元素(img, object, video, iframe) 等设计一个max-width 值为100%
背景图片需要完整地铺满一个小容器，不管容器的尺寸如何变化，background-size: cover这个属性都可以做到，但是，我们也要时刻牢记，带宽并不是无限的，在移动网页中不能把一张大图缩小显示往往不太明智
当图片以行列式进行布局，让视口的宽度来决定列的数量，弹性布局或者display：inline-block加上常规的文本折行行为，都可以实现这一点
在使用多列文本时，指定column-width 而不是指定 column-count 这样它就可以在较小的屏幕下自动显示为单列布局