CSS之Responsive设计的关键三步

下面我们就通过这篇教程，帮助大家从三个步骤来了解和学习“Responsive”设计

第一步：Meta标签

大家都知道，现在智能手机上浏览web页面会让页面适应屏幕的大小，显示在屏幕上。不过我们可以通过“meta”标签对他进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下

另外一点，由于“Responsive”设计是结合CSS3的Media Queries属性，才能尽显这种风格的设计，但大家都懂，在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持，我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本

第二步：HTML Markup

在这个实例中，有一个最常见，最基础的HTML Markup。他主要包括了一个“头部”、“主内容”、“边栏”和“页脚”四个主要部分。而且其中“头部”固定了一个高度值“180px”；“主内容”宽度设置为“600px”；“边栏”的宽度为“300px”。这些只是一些最基本的样式值。你可以根据你的需求进行更详细的设置。这里不在做另外说明

第三步：Media Queries

CSS3的Media Queries是“Responsive”设计中的重要一部分，主要用他来告诉浏览器在一定条件之下如何进行渲染web页面。在这里我们只展示的是让CSS3 Media Queries告诉浏览器在一定的条件下如何渲染上面所说四部分的宽度值而以

3.1 下面这种规则是当浏览器可视大小等于或小于“980px”的布局。从代码中可以清楚的看到，在浏览器可视大小符何下面条件时，整个布局从固定布局转为流体布局，具体请看代码的变化

3.2 接下来我们在来看第二种情况：浏览器可视化大小等于或小于700px时，把“＃content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”，也就成了一列的满屏显示，具体代码如下

3.3 最后我们在一起来看一下手机上的渲染：当显示器可视大小等于或小于480px时，将“#header”的高度重置为“auto”，并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了

上面只是写了三种情效果的效果，大家可以根据自己的爱好设定更多的条件。而且也可以还可以将页面的更细致的样式渲放在指定的条年中，达到不同的效果渲染。换句话说：通过CSS3的Media Queries在不同一条件中使用不同的样式规则，渲染出不同的页面效果。这里只是做了一基本的使用介绍