Responsive设计的关键三步

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近一直在学习这个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网页设计”并不是一件很大的事情了,在互联网上随处可见,特别是然国外的一些网站上,对于这种的布局设计使用是相当的NB。那么今天我在给大家直译一篇由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”设计是结合CSS3Media 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

CSS3Media 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

Nike Roshe Two Release Date

如需转载,烦请注明出处:https://www.w3cplus.com/css3/responsive-design-in-3-steps

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部