Responsive设计的关键三步

作者：大漠 日期：2011-12-15 点击：2206
Responsive

最近一直在学习这个Responsive设计相关知识点，前面我在本站陆续发布了与“Responsive”设计的相关教程：

  1. 《CSS3 Media Queries》
  2. 《CSS3 Media Queries案例——Hicksdesign》
  3. 《CSS3 Media Queries案例——Tee Gallery》
  4. 《CSS3 Media Queries案例——A List Apart》
  5. 《Responsive设计和CSS3 Media Queries的结合》
  6. 《了解Responsive网页设计的三个特性》

现在对于“Responsive网页设计”并不是一件很大的事情了，在互联网上随处可见，特别是然国外的一些网站上，对于这种的布局设计使用是相当的ＮＢ。那么今天我在给大家直译一篇由webdesignerwall写的有关于Responsive方面的教程——《Responsive Design in 3 Steps》。希望对大家有所帮助。

如果你对“Responsive设计”完全没有任何概念的化，我建议您先花一点时间浏览前面列表中的文章，或者你跳过直接阅读webdesignerwall早期发布的两篇 Blog: Inspiration: Fluid & Responsive Design 和Responsive Design with CSS3 Media Queries 。对于新手听起来，“Responsive”设计是一个复杂的事情，但实际上他并不是你想像的那样复杂。下面我们就通过这篇教程，帮助大家从三个步骤来了解和学习“Responsive”设计。

第一步：Meta标签

在介绍第一步之前，大家先点击这个链接，看一个在线的DEMO效果。

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <!--[if lt IE 9]>
    	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->

注：此处使用了条们注解的方法，让只有小于IE9的浏览器才能别这个media-queries.js脚本代码。有关于其具体的使用，大家可以点阅《浏览器兼容之旅的第一站:如何创建条件样式》。

第二步：HTML Markup

以这个DEMO为例：

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

第三步：Media Queries

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

下面我们来看几个不定条件的设置样例：

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

    /*＝＝＝＝＝＝＝等于或小于980px＝＝＝＝＝*/
    @media screen and (max-width:980px){
      #pagewrap {
        width: 94%;
      }
      #content {
        width: 65%;
      }
      #sidebar {
        width: 30%;
      }
    }

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

    /*＝＝＝＝＝＝＝等于或小于700px＝＝＝＝＝＝＝＝*/
    @media screen and (max-width:700px) {
      #content ,
      #sidebar{
        float: none;
        wdith: auto;
      }
    }

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

    /*＝＝＝＝＝＝＝等于或小于480px＝＝＝＝＝＝＝＝*/
    @media screen and (max-width:480px) {
      #header {
        height: auto;
      }
      h1 {
        font-size: 24px;
      }
      #sidebar {
        display: none;
      }
    }

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

今天这篇教程只是展示了一下“Responsive”设计的基本步骤，也是不可少的步骤，希望对大家有所帮助。如果你阅读之后，觉得这个“Responsive”设计特有意思，想进行深一步的扩展阅读，也不仿试着阅读文章开头的列表教程，我想你会喜欢的。

最后再次感谢webdesignerwall给我们提供了这么好的教程——《Responsive Design in 3 Steps。如果您有更好的想法或教程，欢迎在评论中与大家一起分享。

如需转载烦请注明出处：W3CPLUS

返回顶部