通过CSS3MediaQuery实现响应式Web设计

在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的“弹性布局结构”这方面出发，通过一个具体的实例来深入学习。

创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为海城企业提供专业的成都网站建设、成都做网站，海城网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

范例效果预览

首先，我们来看看本篇范例的最终效果演示。打开该页面，拖拽浏览器边框，将窗口慢慢缩小，同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。

更多范例

我(原文作者)使用media query的方式设计了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。

概述

我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。

HTML代码

我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4.         
     
    5.   
  
  
  
  5.             Demo 
    6.   
  
  
  
  6.             Site Description 
    7.   
  
  
  
  7.          
    8.   
  
  
  
  8.         
    9.   
  
  
  
  9.              
    10.   
  
  
  
  10.                 
  11. Home
    12.    
  
  
  
  12.              
    13.   
  
  
  
  13.          
    14.   
  
  
  
  14.          
    15.   
  
  
  
  15.              
    16.   
  
  
  
  16.          
    17.   
  
  
  
  17.      
    18.   
  
  
  
  18.        
    19.   
  
  
  
  19.      
    20.   
  
  
  
  20.          
    21.   
  
  
  
  21.             blog post  
    22.   
  
  
  
  22.          
    23.   
  
  
  
  23.     
 
  •        
  •      
  •          
  •              widget  
  •          
  •      
  •    
  •      
  •         footer  
  •      
  •        
  •  

    HTML5

    IE是永恒的话题;对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的***解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    CSS

    HTML5块级元素样式

    首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些“新”元素声明为块级：

     
 
 
 
      
  
  
  
  
    1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   
      2.   
  
  
  
    2.     display: block;  
      3.   
  
  
  
    3. } 
      4.

    主要结构的CSS

    忽略细节，我们仍是将注意力集中在大问题上。正如在前文“概述”中提到的，默认情况下页面容器的固定宽度为980像素，页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素，左浮动;侧边栏(sidebar)右浮动，宽度为280像素。

     
 
 
 
      
  
  
  
  
    1. #pagewrap {  
      2.   
  
  
  
    2.     width: 980px;  
      3.   
  
  
  
    3.     margin: 0 auto;  
      4.   
  
  
  
    4. }  
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6. #header {  
      7.   
  
  
  
    7.     height: 160px;  
      8.   
  
  
  
    8. }  
      9.   
  
  
  
    9.    
      10.   
  
  
  
    10. #content {  
      11.   
  
  
  
    11.     width: 600px;  
      12.   
  
  
  
    12.     float: left;  
      13.   
  
  
  
    13. }  
      14.   
  
  
  
    14.    
      15.   
  
  
  
    15. #sidebar {  
      16.   
  
  
  
    16.     width: 280px;  
      17.   
  
  
  
    17.     float: right;  
      18.   
  
  
  
    18. }  
      19.   
  
  
  
    19.    
      20.   
  
  
  
    20. #footer {  
      21.   
  
  
  
    21.     clear: both;  
      22.   
  
  
  
    22. } 
      23.

    截至目前的效果演示

    目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。

    #p#

    CSS3 Media Query

    终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    接下来，我们要创建CSS样式表，并在页面中调用：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    当浏览器可视部分宽度大于650px小于980px时(液态布局)

    ◆ 将pagewrap的宽度设置为95%

    ◆ 将content的宽度设置为60%

    ◆ 将sidebar的宽度设置为30%

     
 
 
 
      
  
  
  
  
    1. @media screen and (max-width: 980px) {  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     #pagewrap {  
      4.   
  
  
  
    4.         width: 95%;  
      5.   
  
  
  
    5.     }  
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.     #content {  
      8.   
  
  
  
    8.         width: 60%;  
      9.   
  
  
  
    9.         padding: 3% 4%;  
      10.   
  
  
  
    10.     }  
      11.   
  
  
  
    11.    
      12.   
  
  
  
    12.     #sidebar {  
      13.   
  
  
  
    13.         width: 30%;  
      14.   
  
  
  
    14.     }  
      15.   
  
  
  
    15.     #sidebar .widget {  
      16.   
  
  
  
    16.         padding: 8% 7%;  
      17.   
  
  
  
    17.         margin-bottom: 10px;  
      18.   
  
  
  
    18.     }  
      19.   
  
  
  
    19.    
      20.   
  
  
  
    20. } 
      21.

    当浏览器可视部分宽度小于650px时(单栏布局)

    ◆ 将header的高度设置为auto

    ◆ 将searchform绝对定位在top 5px的位置

    ◆ 将main-nav、site-logo、site-description的定位设置为static

    ◆ 将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏)，并取消float设置

    ◆ 将sidebar的宽度设置为100%，并取消float设置

     
 
 
 
      
  
  
  
  
    1. @media screen and (max-width: 650px) {  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     #header {  
      4.   
  
  
  
    4.         height: auto;  
      5.   
  
  
  
    5.     }  
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.     #searchform {  
      8.   
  
  
  
    8.         position: absolute;  
      9.   
  
  
  
    9.         top: 5px;  
      10.   
  
  
  
    10.         right: 0;  
      11.   
  
  
  
    11.     }  
      12.   
  
  
  
    12.    
      13.   
  
  
  
    13.     #main-nav {  
      14.   
  
  
  
    14.         position: static;  
      15.   
  
  
  
    15.     }  
      16.   
  
  
  
    16.    
      17.   
  
  
  
    17.     #site-logo {  
      18.   
  
  
  
    18.         margin: 15px 100px 5px 0;  
      19.   
  
  
  
    19.         position: static;  
      20.   
  
  
  
    20.     }  
      21.   
  
  
  
    21.    
      22.   
  
  
  
    22.     #site-description {  
      23.   
  
  
  
    23.         margin: 0 0 15px;  
      24.   
  
  
  
    24.         position: static;  
      25.   
  
  
  
    25.     }  
      26.   
  
  
  
    26.    
      27.   
  
  
  
    27.     #content {  
      28.   
  
  
  
    28.         width: auto;  
      29.   
  
  
  
    29.         float: none;  
      30.   
  
  
  
    30.         margin: 20px 0;  
      31.   
  
  
  
    31.     }  
      32.   
  
  
  
    32.    
      33.   
  
  
  
    33.     #sidebar {  
      34.   
  
  
  
    34.         width: 100%;  
      35.   
  
  
  
    35.         float: none;  
      36.   
  
  
  
    36.         margin: 0;  
      37.   
  
  
  
    37.     }  
      38.   
  
  
  
    38.    
      39.   
  
  
  
    39. } 
      40.

    当浏览器可视部分宽度小于480px时

    480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时，我们需要做以下调整：

    ◆ 禁用html节点的字号自动调整。默认情况下，iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整。

    ◆ 将main-nav中的字号设置为90%

    弹性图片

    我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。对于IE，仍然需要一点额外的工作：

     
 
 
 
      
  
  
  
  
    1. img {  
      2.   
  
  
  
    2.     max-width: 100%;  
      3.   
  
  
  
    3.     height: auto;  
      4.   
  
  
  
    4.     width: auto\9; /* ie8 */  
      5.   
  
  
  
    5. } 
      6.

    弹性内嵌视频

    同样的，对于视频，我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力，所以我们以width: 100%来代替：

     
 
 
 
      
  
  
  
  
    1. .video embed,  
      2.   
  
  
  
    2. .video object,  
      3.   
  
  
  
    3. .video iframe {  
      4.   
  
  
  
    4.     width: 100%;  
      5.   
  
  
  
    5.     height: auto;  
      6.   
  
  
  
    6. } 
      7.

    iPhone中的初始化缩放

    默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。

     
 
 
 
      
  
  
  
  
    1.  
      2.

    最终效果演示

    该范例的最终演示正像我们在本文开始时看到的那样;另外记得，在条件允许的情况下，使用各种典型移动设备(iPhone、iPad、Android、Blackberry等)来检验页面的移动版本。

    要点总结

    Media Query JavaScript

    对于那些尚不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js

     
 
 
 
      
  
  
  
  
    1.  
      2.

    CSS Media Queries

    实现自适应页面设计的关键之一，就是使用CSS根据分辨率宽度的变化来调整页面布局结构。

     
 
 
 
      
  
  
  
  
    1. @media screen and (max-width: 560px) {  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     #content {  
      4.   
  
  
  
    4.         width: auto;  
      5.   
  
  
  
    5.         float: none;  
      6.   
  
  
  
    6.     }  
      7.   
  
  
  
    7.    
      8.   
  
  
  
    8.     #sidebar {  
      9.   
  
  
  
    9.         width: 100%;  
      10.   
  
  
  
    10.         float: none;  
      11.   
  
  
  
    11.     }  
      12.   
  
  
  
    12.    
      13.   
  
  
  
    13. } 
      14.

    弹性图片

    通过max-width: 100%和height: auto实现图片的弹性化。

     
 
 
 
      
  
  
  
  
    1. img {  
      2.   
  
  
  
    2.     max-width: 100%;  
      3.   
  
  
  
    3.     height: auto;  
      4.   
  
  
  
    4.     width: auto\9; /* ie8 */  
      5.   
  
  
  
    5. } 
      6.

    弹性内嵌元素(视频)

    通过width: 100%和height: auto实现内嵌元素的弹性化。

     
 
 
 
      
  
  
  
  
    1. .video embed,  
      2.   
  
  
  
    2. .video object,  
      3.   
  
  
  
    3. .video iframe {  
      4.   
  
  
  
    4.     width: 100%;  
      5.   
  
  
  
    5.     height: auto;  
      6.   
  
  
  
    6. } 
      7.

    字号自动调整的问题

    通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整

     
 
 
 
      
  
  
  
  
    1. html {  
      2.   
  
  
  
    2.     -webkit-text-size-adjust: none;  
      3.   
  
  
  
    3. } 
      4.

    页面宽度缩放的问题

     
 
 
 
      
  
  
  
  
    1.  
      2.

    原文：http://beforweb.com/node/7/page/0/1

    网站栏目：通过CSS3MediaQuery实现响应式Web设计
    网页网址：http://www.gawzjz.com/qtweb/news15/205465.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    App开发知识

    分类信息网站

    重庆网站建设　　 　中国（西部）云计算中心　　 　绵阳服务器托管　　 　资中网站建设　　 　四川雅安服务器托管　　 　网站方案　　 　电商网站建设　　 　seo推广公司　　 　四川服务器托管　　 　富顺网站建设　　 　成都关键词SEO优化　　 　移动服务器托管　　 　成都企业网站改版　　 　犀浦门窗定制　　 　西部信息中心　　 　物流公司网站建设方案　　 　bgp多线机房托管　　 　定制网站开发　　 　网络推广公司　　 　成都网站设计