通过CSS3 Media Query实现响应式Web设计
通过CSS3 Media Query实现响应式Web设计-移动阅读二维码

移动前端 / 移动前端 | 2012-01-28 | 来源:Be For Web | 作者:C7210

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

范例效果预览

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

通过CSS3 Media Query实现响应式Web设计

更多范例

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

 

概述

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

html5-css3-responsive-web-design-design-overview

HTML代码

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

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

HTML5.js

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

1
2
3
<!--[if lt IE 9]>
<![endif]-->

CSS

HTML5块级元素样式

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

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

主要结构的CSS

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

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

截至目前的效果演示

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

页码: 1 2 下一页

本文链接：http://www.mobileui.cn/css3-media-query-response-web-design.html
本文标签: , , , , ,

向您推荐：

文章评论　 发表评论
  1. 冰箱里的一尾鱼 说：
    2014 年 6 月 6 日下午 5:43

    楼主，我有个问题，这种响应式布局，除了外边的大体框架需要视情况调整，里面的内容是不是也需要呀？直接全部用相对单位，能解决吗？