2019-05-27 响应式布局

响应式布局是为了解决移动端尺寸不同的问题。

优点

面对不同分辨率设备灵活性更强
能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率低下。
代码累赘，会出现隐藏无用的元素，加载时间过长。
是一种折中性质的解决方案，多方面因素影响而达不到最佳效果。

响应式布局的写法

@media mediatypeand( media feature ){CSS-Code;}

Mediatype（媒体类型）参数

一般取：
screen计算机屏幕（默认）
print打印预览模式/打印页面
all适用于所有设备

media feature媒体取值范围

max-width：定义输出设备中的页面最大可见区域宽度
min-width：定义输出设备中的页面最小可见区域宽度

媒体查询

@media 媒体类型 and|not|only (媒体功能){css-code}是css3才支持的用法。
css2支持的用法是在标签中使用link引入：。
css3用法更受欢迎，是因为css2的用法会增加页面http的请求次数，增加了页面负担。