RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
利用媒体查询进行响应式设计

如今屏幕分辨率的范围已经从320px（iPhone）涵盖到2560px（大显示器）或者更高了。用户不单单在桌面电脑上浏览网站。用户如今会使 用移动电话，小的笔记本，平板设备（比如iPad或者Playbook）来访问互联网。所以传统的固定宽度设计不再适用了。web设计需要有自适应能力。 页面布局要可以自动的去适应所有的分辨率和设备。这个教程将会告诉你如何利用HTML5和CSS3媒体查询来创建一个跨浏览器的响应式设计。

为平邑等地区用户提供了全套网页设计制作服务，及平邑网站建设行业解决方案。主营业务为成都做网站、成都网站设计、平邑网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

首先看个实例

在你开始之前，看下最终demo是什么样子。改变你浏览器的大小，然后看看页面布局在基于viewport（浏览器可视区域）宽度的情况下是如何自动的进行浮动的。

更多例子

如果你想看更多的例子，看一下下面我用媒体查询设计的WordPress模板：Tisa，Elemin，Suco，iTheme2，Funki，Minblr和Wumblr。

概览

对于任何宽度大于1024px的分辨率，页面容器的宽度会为980px。媒体查询被用来检查如果viewport窄于980px，那么页面布局会变 成流动宽度而不是固定宽度。如果viewport窄于650px，那么页面布局将会把内容容器和侧边栏展开为整体宽度，从而形成一个单栏的布局。

HTML代码

我不会去讲HTML代码的细节。下面是页面布局的整体结构。我拥有一个pagewrap容器，它把header，content，sidebar，footer包裹在了一起。

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

    HTML5.js

    注意一下我在demo中使用了HTML5标签。低于9的IE浏览器不支持HTML5中引入的新元素，比如

    ，
    ，
    ，
    等等。在HTML文档中包含html5.js这个Javscript文件可以使IE识别这些新元素。

     
 
 
 
        
  
  
  
    1.  
      2.

    CSS

    重置HTML5元素为块元素

    下面的CSS将会把HTML元素（article，aside，figure，header，footer等等）重置为块元素。

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

    主结构CSS

    这次我还是不会去讲细节。主容器pagewrap是980px宽。Header拥有一个固定的160px高度。容器content是600px宽并且向左浮动。sidebar是280px宽并向右浮动。

     
 
 
 
        
  
  
  
    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.

    #p#

    ***步的Demo

    这里是这个设计demo。注意媒体查询还没有实现。改变浏览器窗口的尺寸，你应该看到页面布局并不具有扩展能力。

    有关CSS3媒体查询

    现在是有趣的部分－－媒体查询

    包含媒体查询的JavaScript文件

    Internet Explorer8或者更老的版本不支持CSS3媒体查询。你可以通过添加css3-mediaqueries.js这个Javascript文件来使其支持媒体查询。

     
 
 
 
        
  
  
  
    1.  
      2.

    包含媒体查询的CSS文件

    为媒体查询创建一个新的样式表。看下我之前的教程来搞清楚媒体查询是如何工作的。

     
 
 
 
        
  
  
  
    1.  
      2.

    Viewport小于980px（流动布局）

    对于窄于980px的viewport，如下的规则将会被应用：

    • pagewrap = 重置width为95%
    • content = 重置width为60%
    • sidebar = 重置width为30%

    提示: 使用百分比（%）的值来使容器变得流动。

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

    Viewport小于650px（一栏布局）

    接下来对窄于650px的viewport我拥有另一个CSS集合：

    • header = 重置height为auto
    • searchform = 重新定位searchform为离顶部5px
    • main-nav = 重置position为static
    • site-logo = 重置position为static
    • site-description = 重置position为static
    • content = 重置width为auto（这会使得容器展开为整体宽度）并且不进行浮动
    • sidebar = 重置width为100%并且不进行浮动
     
 
 
 
        
  
  
  
    1. @media screen and (max-width: 650px) { 
      2.   
  
  
  
    2.     #header { 
      3.   
  
  
  
    3.         height: auto; 
      4.   
  
  
  
    4.     } 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     #searchform { 
      7.   
  
  
  
    7.         position: absolute; 
      8.   
  
  
  
    8.         top: 5px; 
      9.   
  
  
  
    9.         right: 0; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.     #main-nav { 
      13.   
  
  
  
    13.         position: static; 
      14.   
  
  
  
    14.     } 
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.     #site-logo { 
      17.   
  
  
  
    17.         margin: 15px 100px 5px 0; 
      18.   
  
  
  
    18.         position: static; 
      19.   
  
  
  
    19.     } 
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21.     #site-description { 
      22.   
  
  
  
    22.         margin: 0 0 15px; 
      23.   
  
  
  
    23.         position: static; 
      24.   
  
  
  
    24.     } 
      25.   
  
  
  
    25.  
      26.   
  
  
  
    26.     #content { 
      27.   
  
  
  
    27.         width: auto; 
      28.   
  
  
  
    28.         float: none; 
      29.   
  
  
  
    29.         margin: 20px 0; 
      30.   
  
  
  
    30.     } 
      31.   
  
  
  
    31.  
      32.   
  
  
  
    32.     #sidebar { 
      33.   
  
  
  
    33.         width: 100%; 
      34.   
  
  
  
    34.         float: none; 
      35.   
  
  
  
    35.         margin: 0; 
      36.   
  
  
  
    36.     } 
      37.   
  
  
  
    37.  
      38.   
  
  
  
    38. } 
      39.

    小于480px的Viewport

    下面的CSS将会在viewport宽度小于480px（即横屏模式下iPhone屏幕的宽度）的时候生效。

    • html = 禁止文本大小调整（text size adjustment）。默认情况下，iPhone放大了文本大小，这样读起来更加舒服。你可以通过添加-webkit-text-size-adjust: none来禁止文本大小调整。
    • main-nav = 重置字体大小为90%
     
 
 
 
        
  
  
  
    1. media screen and (max-width: 480px) { 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.     html { 
      4.   
  
  
  
    4.         -webkit-text-size-adjust: none; 
      5.   
  
  
  
    5.     } 
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     #main-nav a { 
      8.   
  
  
  
    8.         font-size: 90%; 
      9.   
  
  
  
    9.         padding: 10px 8px; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12. } 
      13.

    弹性图片

    为了使图片具有弹性，只需要添加max-width:100%和height:auto。给图片加上max-width:100%和height:auto在IE7中是工作的，但是在IE8中不工作（是的，另一个奇怪的IE　bug）。为了解决这个问题，你需要为IE8添加width:auto\9。

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

    #p#

    弹性的嵌入视频

    为了使嵌入视频具有弹性，可以使用上面所提到的相同技巧。由于未知原因，（嵌入元素的）max-width:100%在Safari中不工作。解决方式是使用width:100%做为替代。

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

    进行初始缩放的Meta标签（iPhone）

    默认情况下，iPhone中的Safari会收缩HTML页面来适应iPhone屏幕。下面的meta标签告诉iPhone中的Safari使用设备的宽度做为viewport的宽度，并且禁用初始缩放比例。

     
 
 
 
        
  
  
  
    1.  
      2.

    最终Demo

    查看最终demo并且调整你浏览器窗口的大小来看看真实工作的媒体查询。不要忘记用iPhone，iPad，Blackberry（新版本）和Android电话来访问demo，以便看看移动版本的样子。

    总结

    • 媒体查询的Javascript备胎：

    css3-mediaqueries.js是使那些不支持媒体查询的浏览器可以使用媒体查询所必需的。

     
 
 
 
        
  
  
  
    1.  
      2.
    • CSS媒体查询：

    创建自适应设计的手段是根据viewport的宽度来用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）：

    在iPhone上使用-webkit-text-size-adjust:none来禁用文本大小调整。

     
 
 
 
        
  
  
  
    1. html { 
      2.   
  
  
  
    2.     -webkit-text-size-adjust: none; 
      3.   
  
  
  
    3. } 
      4.
    • 重置iPhone的Viewport和初始缩放比例：

    下面的meta标签在iPhone上重置viewport和初始缩放比例：

     
 
 
 
        
  
  
  
    1.  
      2.

    当前名称：利用媒体查询进行响应式设计
    本文来源：http://www.jxjierui.cn/article/dhspdoe.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区浩晨众云设计工作室（个体工商户）
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.jxjierui.cn

    公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

    网站备案号：蜀ICP备2025119795号-2

    内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站