揭秘CSS(第 1 版)
9.4.5 布局实例
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

基本布局类型

多列布局

弹性布局盒模型

响应式布局

兼容老IE

弹性图片

弹性网格

媒体查询

布局实例

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

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

首先,创建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 所示:

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

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

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

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验