响应式布局-摘抄

响应式布局

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验
，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了
一些成形的模式。

优点和缺点编辑

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

缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。

设备的宽和高device-width，device-height显示屏幕/触觉设备。

渲染窗口的宽和高width，height显示屏幕/触觉设备。 设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。 画面比例aspect-ratio点阵打印机等。 设备比例device-aspect-ratio-点阵打印机等。 对象颜色或颜色列表color，color-index显示屏幕。 设备的分辨率resolution。

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}