响应式布局

什么叫做响应式布局？
 
也即是响应式Web设计。响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。  怎样实现响应式布局？  对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。  首先我们要允许网页宽度自动调整  在网页代码的头部，加入一行viewport元标签：  <meta name=”viewpoint” content=”width=device-width,initial-scale=1”>    viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。  下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。根据不同的设备屏幕宽度，设置不同的CSS。
1：外联样式表
2：样式表中的内嵌法