CSS3 响应式布局实例

掌握了响应式设计的核心技术之后，你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂，但事实上，它比你想象的要简单。

下面通过构建一个响应式的页面基本布局，让你快速了解如何使用响应式设计技术来构建响应式网站。

首先，创建HTML结构和页面布局。

最常见基本布局将页面划分为 4 个部分，分别是头部、主内容区、侧边栏和页脚，而主内容区和侧边栏一般都会包含在一个容器中。如：

<body>
<header>header</header>
<div id="wrapper">
<main>main</main>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>

如果一个元素的宽度为 auto 或百分比，它就具有响应性，它就会随着浏览器窗口尺寸的改变，而自动调整宽度。这里将主内容区的宽度为 78%，侧边栏的宽度为 20%，而 header 和 footer使用自动宽度，无需进行设置。

main {
width: 78%;
float: left;
}
aside {
width: 20%;
float: right;
}

由于 #wrapper 只包含浮动元素，可以通过 overflow: hidden 来创建一个块格式化上下文，让它能够包含浮动元素。再为它设置适当的外边距，让各个元素之间泾渭分明。

#wrapper {
margin: 10px auto;
overflow: hidden;
}

为了方便查看效果，让头部、主内容区、侧边栏、页脚都具有 40px 的固定高度和 1px 的实线边框。

header, main, aside, footer {
height: 40px;
border: 1px solid #ccc;
}

其次，通过 meta 标签，设置视口的宽度，并禁止默认缩放。

视口（viewport）指的是浏览器（包括桌面浏览器和移动浏览器）显示页面的区域，它只是浏览区域，并不包含地址栏、按钮等区域。媒体查询中的 width 特性指是视口的宽度，而 device-width特性指的是屏幕的宽度。

在大多数移动设备上，默认情况下，这两个值通常不一样。如，iPhone的视口区域默认是 980 像素宽，而它的屏幕只有 320 像素宽。因此，iPhone 会按980 像素宽来显示页面，并将页面缩小，以适应 320 像素的屏幕宽度，就会显示为网站缩小后的样子。

幸运的是，在页面的头部添加 meta 元素，可以使该问题迎刃而解：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码的重点是 width=device-width，它将视口的宽度设置为设备的屏幕宽度，来让网页的宽度自动适应移动设备的屏幕宽度。而 initial-scale=1.0 表示页面按实际尺寸显示，不进行缩放。

在移动设备的浏览器上，通过添加 user-scalable=no，可以禁用其缩放功能。禁用缩放功能后，用户只能滚动屏幕，这样能让你的网站看上去更像原生应用。但并不推荐所有的网站都使用这种方式，是否使用这种方式要视情况而定。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

最后，设置断点，让布局适应不同视口宽度。

通过媒体查询设置不同的断点，为不同的视图宽度指定不同的CSS规则，让浏览器根据指定的视图宽度渲染页面，来实现响应式布局。

可以根据需要添加任意多个媒体查询断点，为了简单起见，这里只添加一个断点。如，希望在视口宽度小于等于 480px 时，将 main 和 aside 的宽度设置为 auto 并取消浮动，让它们全屏显示：

@media screen and (max-width: 480px) {
main {
width: auto;
float: none;
}
aside {
width: auto;
float: none;
margin-top: 10px;
}
}

针对不同的屏幕尺寸定义媒体查询后，用户在改变浏览器窗口大小的过程中，浏览器会根据视口的尺寸自动重新渲染页面。

如，当视口宽度大于 480px 时，main 和 aside 在一行内显示，并各占一栏，宽度分别为 78% 和 20%。运行结果如图 9‑22 所示：

图9-22 视口宽度大于480px时的布局效果

当视口宽度小于 480px 时，main 和 aside 都全屏显示，各自独占一行。运行结果如图 9‑23 所示：

图9-23 视口宽度大于480px时的布局效果

当然，构建响应式网站要考虑的因素很多，远比这个要复杂。本实例仅仅是抛砖引玉，只简单介绍了构建响应式网站的基本过程，要了解响应式设计的更多技术，还要阅读专门介绍响应式设计的书籍，如《响应式Web设计：HTML5和CSS3实战》等。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS3 响应式布局实例相关推荐

html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式:也可以针对不同的屏幕尺寸设置不同的样式:当重置浏览器大小的过程中,页面也会 ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
html5响应式布局实例,CSS3响应式布局案例
布局结果图: 电脑全屏: 手机浏览: 竖屏: 横屏: 代码: 响应式布局 * { margin: 0; padding: 0; } html, body { height: 100%; font: 2 ...
让老IE支持CSS3响应式布局
对于响应式布局,有一点需要注意,就是IE8 及以下的版本不支持媒体查询,这意味着它们只会呈现媒体查询以外的样式,即基准样式.并且,它们也不支持HTML5 的 header.main.aside.foo ...
CSS3 响应式布局之弹性网格
当页面需要适应各种尺寸的设备时,就应该使用弹性网格,让整个布局结构根据用户行为,以及设备环境进行响应式调整. 弹性网格是一个网格系统,它参考流式布局中网格系统的设计,将每个格子设置为百分比宽度,以便网 ...
css3响应式布局设计——回顾
响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...
CSS3 响应式布局之响应式图片
默认情况下,图像的显示尺寸是 HTML 中指定的 width 和 height 属性值.如果不指定这些属性值,图像就会按原始尺寸显示.当然,还可以在 CSS 中以像素为单位,设置图像的 width 和 ...

CSS3 响应式布局实例

CSS3 响应式布局实例相关推荐

最新文章

热门文章