利用媒体查询进行响应式设计

开发 前端
web设计需要有自适应能力。 页面布局要可以自动的去适应所有的分辨率和设备。这个教程将会告诉你如何利用HTML5和CSS3媒体查询来创建一个跨浏览器的响应式设计。

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

首先看个实例

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

更多例子

如果你想看更多的例子,看一下下面我用媒体查询设计的WordPress模板TisaEleminSucoiTheme2FunkiMinblrWumblr

概览

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

HTML代码

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

  1. <div id="pagewrap"> 
  2.     <header id="header"> 
  3.         <hgroup> 
  4.             <h1 id="site-logo">Demo</h1> 
  5.             <h2 id="site-description">Site Description</h2> 
  6.         </hgroup> 
  7.         <nav> 
  8.             <ul id="main-nav"> 
  9.                 <li><a href="#">Home</a></li> 
  10.             </ul> 
  11.         </nav> 
  12.         <form id="searchform"> 
  13.             <input type="search"> 
  14.         </form> 
  15.     </header> 
  16.  
  17.     <div id="content"> 
  18.         <article class="post"> 
  19.             blog post 
  20.         </article> 
  21.     </div> 
  22.  
  23.     <aside id="sidebar"> 
  24.         <section class="widget"> 
  25.              widget 
  26.         </section> 
  27.     </aside> 
  28.  
  29.     <footer id="footer"> 
  30.         footer 
  31.     </footer> 
  32. </div> 

HTML5.js

注意一下我在demo中使用了HTML5标签。低于9的IE浏览器不支持HTML5中引入的新元素,比如 <header><article><footer><figure>等等。在HTML文档中包含html5.js这个Javscript文件可以使IE识别这些新元素。

  1. <!--[if lt IE 9]> 
  2.     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
  3. <![endif]--> 

CSS

重置HTML5元素为块元素

下面的CSS将会把HTML元素(article,aside,figure,header,footer等等)重置为块元素。

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

主结构CSS

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

  1. #pagewrap { 
  2.     width980px
  3.     margin0 auto
  4.  
  5. #header { 
  6.     height160px
  7.  
  8. #content { 
  9.     width600px
  10.     floatleft
  11.  
  12. #sidebar { 
  13.     width280px
  14.     floatright
  15.  
  16. #footer { 
  17.     clearboth

#p#

***步的Demo

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

有关CSS3媒体查询

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

包含媒体查询的JavaScript文件

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

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

包含媒体查询的CSS文件

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

  1. <link href="media-queries.css" rel="stylesheet" type="text/css"

Viewport小于980px(流动布局)

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

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

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

  1. @media screen and (max-width980px) { 
  2.     #pagewrap { 
  3.         width95%
  4.     } 
  5.  
  6.     #content { 
  7.         width60%
  8.         padding3% 4%
  9.     } 
  10.  
  11.     #sidebar { 
  12.         width30%
  13.     } 
  14.     #sidebar .widget { 
  15.         padding8% 7%
  16.         margin-bottom10px
  17.     } 

Viewport小于650px(一栏布局)

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

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

小于480px的Viewport

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

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

弹性图片

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

  1. img { 
  2.     max-width100%
  3.     heightauto
  4.     widthauto\9/* ie8 */ 

#p#

弹性的嵌入视频

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

  1. .video embed
  2. .video object, 
  3. .video iframe { 
  4.     width100%
  5.     heightauto

进行初始缩放的Meta标签(iPhone)

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

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0"

最终Demo

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

总结

  • 媒体查询的Javascript备胎:

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

  1. <!--[if lt IE 9]> 
  2.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
  3. <![endif]--> 
  • CSS媒体查询:

创建自适应设计的手段是根据viewport的宽度来用CSS重写页面布局结构。

  1. @media screen and (max-width560px) { 
  2.  
  3.     #content { 
  4.         widthauto
  5.         floatnone
  6.     } 
  7.  
  8.     #sidebar { 
  9.         width100%
  10.         floatnone
  11.     } 
  12.  
  13. }
  • 具有弹性的图片:

使用max-width:100%height:auto来使图片变得具有弹性。

  1. img { 
  2.     max-width100%
  3.     heightauto
  4.     widthauto\9/* ie8 */ 
  • 具有弹性的嵌入视频:

使用width:100%height:auto使嵌入视频具有弹性。

  1. .video embed
  2. .video object, 
  3. .video iframe { 
  4.     width100%
  5.     heightauto
  • Webkit字体大小调整(Text Size Adjust):

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

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

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

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0"> 

原文链接:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

译文链接:http://weizhifeng.net/responsive-design-with-css3-media-queries.html

责任编辑:陈四芳 来源: weizhifeng.net
相关推荐

2020-10-21 07:48:36

媒体查询设计

2020-09-11 09:26:55

媒体查询HTMLCSS

2012-12-10 10:58:02

IBMdW

2023-11-09 16:43:38

CSS Grid网页布局

2016-11-23 18:39:36

css

2023-03-05 19:28:11

JavaScripCSS

2012-01-09 14:48:15

响应式Web

2022-07-27 15:30:24

媒体查询css

2022-07-27 15:30:05

css容器查询样式查询

2021-06-09 07:15:19

CSS容器查询

2014-08-05 14:49:39

Web响应式设计design

2012-01-16 09:37:04

jQuery

2013-03-01 10:42:21

响应式Web

2020-05-08 10:54:33

大数据社交媒体营销

2013-05-29 12:18:42

响应式响应式设计响应式设计流程

2013-04-19 10:53:55

响应式设计Web

2013-01-04 14:41:07

Android开发产品设计类响应式设计

2017-09-08 16:12:34

视口单位适配布局

2023-09-01 09:19:40

CSS函数模式

2012-05-25 10:18:23

响应式
点赞
收藏

51CTO技术栈公众号