源于生活

标题: 利用媒体查询进行响应式设计 [打印本页]
作者: kevin-ying    时间: 2015-7-2 08:37
标题: 利用媒体查询进行响应式设计
[size=14.3999996185303px]作者: JeremyWei | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明
网址: http://weizhifeng.net/responsive ... -media-queries.html

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

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

首先看个实例

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

[attach]936[/attach]

更多例子

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

概览

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

[attach]934[/attach]

HTML代码

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


  1. <font color="rgb(110, 110, 110)"><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>

  17.     <div id="content">
  18.         <article class="post">
  19.             blog post
  20.         </article>
  21.     </div>

  23.     <aside id="sidebar">
  24.         <section class="widget">
  25.              widget
  26.         </section>
  27.     </aside>

  29.     <footer id="footer">
  30.         footer
  31.     </footer>
  32. </div></font>
复制代码


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

  1. <!--[if lt IE 9]>

  3.     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

  5. <![endif]-->
复制代码


CSS

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

  1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

  3.     display: block;

  5. }
复制代码


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

  1. #pagewrap {
  2.     width: 980px;
  3.     margin: 0 auto;
  4. }



  8. #header {
  9.     height: 160px;
  10. }



  14. #content {
  15.     width: 600px;
  16.     float: left;
  17. }



  21. #sidebar {
  22.     width: 280px;
  23.     float: right;
  24. }



  28. #footer {
  29.     clear: both;
  30. }
复制代码


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

有关CSS3媒体查询

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

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

  1. <!--[if lt IE 9]>

  3.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

  5. <![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-width: 980px) {
  2.     #pagewrap {
  3.         width: 95%;
  4.     }



  8.     #content {
  9.         width: 60%;
  10.         padding: 3% 4%;
  11.     }



  15.     #sidebar {
  16.         width: 30%;
  17.     }

  19.     #sidebar .widget {
  20.         padding: 8% 7%;
  21.         margin-bottom: 10px;
  22.     }
  23. }
复制代码


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) {

  3.     #header {
  4.         height: auto;
  5.     }



  9.     #searchform {
  10.         position: absolute;
  11.         top: 5px;
  12.         right: 0;
  13.     }



  17.     #main-nav {
  18.         position: static;
  19.     }



  23.     #site-logo {
  24.         margin: 15px 100px 5px 0;
  25.         position: static;
  26.     }



  30.     #site-description {
  31.         margin: 0 0 15px;
  32.         position: static;
  33.     }



  37.     #content {
  38.         width: auto;
  39.         float: none;
  40.         margin: 20px 0;
  41.     }



  45.     #sidebar {
  46.         width: 100%;
  47.         float: none;
  48.         margin: 0;
  49.     }
  50. }
复制代码


小于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.     html {
  3.         -webkit-text-size-adjust: none;
  4.     }



  8.     #main-nav a {
  9.         font-size: 90%;
  10.         padding: 10px 8px;
  11.     }
  12. }
复制代码


弹性图片

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

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


弹性的嵌入视频

为了使嵌入视频具有弹性，可以使用上面所提到的相同技巧。由于未知原因，（嵌入元素的）max-width:100%在Safari中不工作。解决方式是使用width:100%做为替代。
  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }
复制代码


进行初始缩放的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，以便看看移动版本的样子。
[attach]936[/attach]
总结

媒体查询的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-width: 560px) {
  2.     #content {
  3.         width: auto;
  4.         float: none;
  5.     }



  9.     #sidebar {
  10.         width: 100%;
  11.         float: none;
  12.     }
  13. }
复制代码


具有弹性的图片：
使用max-width:100%和height:auto来使图片变得具有弹性。
  1. img {
  2.     max-width: 100%;
  3.     height: auto;
  4.     width: auto\9; /* ie8 */
  5. }
复制代码


具有弹性的嵌入视频：
使用width:100%和height:auto使嵌入视频具有弹性。
  1. .video embed,
  2. .video object,
  3. .video iframe {
  4.     width: 100%;
  5.     height: auto;
  6. }
复制代码


Webkit字体大小调整（Text Size Adjust）：
在iPhone上使用-webkit-text-size-adjust:none来禁用文本大小调整。
  1. html {
  2.     -webkit-text-size-adjust: none;
  3. }
复制代码


重置iPhone的Viewport和初始缩放比例：
下面的meta标签在iPhone上重置viewport和初始缩放比例：
  1. <meta name="viewport" content="width=device-width; initial-scale=1.0">
复制代码




作者: kevin-ying    时间: 2015-7-2 18:57
文件名称:html5.rar
文件大小:1.29 K
文件地址:http://www.kevin-ying.com/plugin.php?id=phpdisk_mini:view&file_id=6

文件名称:css3-mediaqueries.rar
文件大小:4.91 K
文件地址:http://www.kevin-ying.com/plugin.php?id=phpdisk_mini:view&file_id=7


作者: kevin-ying    时间: 2015-7-2 19:22
文件名称:demo.rar
文件大小:10.62 K
文件地址:http://www.kevin-ying.com/plugin.php?id=phpdisk_mini:view&file_id=8






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1