HTML: 响应式布局设计

1、媒体查询是响应式实现的关键，通过判断屏幕的宽度来为每种媒体对象设置不用的CSS，来达到不同显示效果的目的。如下图中所示代码：

1、把多种设备的显示，通过一个页面来展示，在带来灵活性的同时，也提高到编码的复杂度。因此也有人认为对手机和电脑的网页分别进行开发也是一种选择方式。那响应式布局的优缺点有哪些呢？如下图：

1、要实现响应式布局，需要注意宽度需要使用百分比。这样才能显示出正确的页面效果。如下图所示：

1、CSS3 Media Query-媒介查询根据条件告诉浏览器如何为指定视图宽度渲染页面。下面介绍媒介查询的相关用法：

1.Max Width

  下图的样式会在可视区域的宽度小于 600px 的时候被应用。

2、2.Min Width

  下图的样式会在可视区域的宽度大于 900px 的时候被应用。

3、3.Multiple Media Queries

  下图的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

4、4.Device Width

  下图的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

1、有了以上知识，大家可以尝试实现一个自己的响应式网页。在网页的head中不要忘记加入viewport的meta标签。关于viewport可以参考我的另一篇文章（

HTML：理解viewport（视口））