响应式布局那些事儿

1.流式布局（等比例缩放布局）

宽度通过百分比的形式写，而不是固定的像素值，这样会根据浏览器窗口的大小变化而变化

图片：在固定的div宽度，将其设置为width：100%

文字：不要使用像素单位，而是要是用em或者百分比相对单位

为了适应移动端，添加：<meta content="initial-scale=1.0" name="viewport">

注意：

1.边框不支持百分比值，需要边框的可能会出问题，不过也可以通过其他巧妙的方法实现。例如将两个div叠加，下面一个div是201像素，上面一个div是200像素。那么边框就为1像素，下面div的背景颜色就是上面一个div的边框颜色。

这里也可以考虑使用属性box-sizing:border-box，这里的边框值在div的内部

2.如果只是使用百分比，那么再窗口很小的时候回出现高度很高，宽度很窄，不适合阅读。所以需要使用max-width和min-width属性

2.使用媒体查询适配布局

@media (max-width:568px){<!-- 在宽度小于568px的时候使用 -->}@media (min-width:400px) and (max-width:700px){<!-- 在宽度介于400px和700px的时候使用 -->}

如果觉得上面比较麻烦，在后期维护的时候不方便，也可以采用下面的方式，后期维护会方便很多

<link rel="stylesheet" media="(max-width:568px)" type="text/css" href="small_style.css"> 

另外需要注意的是

桌面浏览器的窗口，使用max-width

移动浏览器的窗口，使用max-device-width