响应式布局之 @media
作者: dkvirus 发表于: 2018-07-10 10:25:53 最近更新: 2018-08-01 22:05:47

写好一个 html 页面,在电脑上看起来还不错,如果没做适配的话在手机浏览器查看可能会变得一塌糊涂,怎么解决?很容易想到的一种解决方式就是每个页面做两个版本,当访问网站的时候,判断是用电脑访问的还是手机访问的,跳转对应的页面。之前知道 Bootstrap 是做响应式布局的框架,但一直没机会实践,本文总结响应式布局的原理 @media 以及 Bootstrap 实践。

一、响应式布局原理 @media

1. 初识 @media

前面提到要判断电脑访问还是手机访问,这个步骤如何实现?原理是通过 判断浏览器的宽度。常见设备的宽度收集如下:

类型 设备 宽度
超小屏幕 手机 width < 768px
小屏幕 平板 768px < width < 992px
中等屏幕 一般电脑屏幕 992px < width < 1200px
大屏内幕 宽屏电脑屏幕 width > 1200px

在电脑浏览器上运行如下代码,拖曳浏览器变换大小,可以看到当浏览器宽度不同时设置的样式也不同,@media 属性会帮我们自动监控浏览器的宽度,这样一来只要书写不同宽度的样式即可。

可以看到,这里其实还是要写多个 css 样式的,与传统解决方案要写多个 html 页面来说,稍微有那么一丢丢的改进吧。

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
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试响应式布局</title>
<style>
/* 超大屏幕 */
body {
background-color: blue;
}

/* 一般电脑屏幕大小 */
@media screen and (max-width: 1200px) {
body {
background-color: yellow;
}
}

/* 平板屏幕大小 */
@media screen and (max-width: 992px) {
body {
background-color: red;
}
}

/* 手机屏幕大小 */
@media screen and (max-width: 768px) {
body {
background-color: green;
}
}
</style>
</head>

<body>
</body>
</html>

2. meta 头的设置

在上述代码中,用到两个 meta 属性,这两个属性在做响应式布局的 html 页面时最好都加上。

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

  • width = device-width:宽度等于当前设备的宽度
  • initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
  • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

2)<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">

IE8 浏览器默认不支持 @media 属性,现在 IE 版本大多升级到 IE9 以上了,但浏览器的文档模式却仍可能是 IE8,为了防止这种情况,我们需要上面这段代码来让 IE 的文档渲染模式永远都是最新的。

这段代码后面加了一个 chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的 IE 不管是哪个版本的都可以使用 Webkit 引擎V8 引擎 进行排版及运算,如果没有安装,就显示IE最新的渲染模式。

二、Bootstrap 处理响应式布局

Bootstrap 提供了一套 响应式、移动设备优先 的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

类型 设备 宽度 Bootstrap 栅格
超小屏幕 手机 width < 768px col-xs-*
小屏幕 平板 768px < width < 992px col-sm-*
中等屏幕 一般电脑屏幕 992px < width < 1200px col-md-*
大屏内幕 宽屏电脑屏幕 width > 1200px col-lg-*

如下代码示例:当浏览器宽度在 (992, 1200) 之间 col-md-* 样式起作用;当浏览器宽度在 (0, 768) 之间 col-xs-* 样式起作用。

三、响应式布局实践

最近做了一个网站,其中涉及的响应式布局有以下三个地方。

1. 列表展示

在电脑上查看页面,由于电脑屏幕很宽,一行能展示多个 div。

响应式布局列表图1

但是在手机上访问这个页面,手机屏幕就那么点小,如果一行再展示多列,就会挤压的很丑,将手机上设置一行展示一列。

响应式布局列表图2

列表做响应式很简单,上面的要求用 bootstrap 栅格系统主要代码如下,在电脑屏幕查看页面应用 col-md-4 样式,一行展示三个,在手机屏幕查看应用 col-xs-12 样式,一行只展示一个,于是就有了上图的效果。

1
2
3
4
<div class="row">
<div class="col-xs-12 col-md-4">Project1</div>
<div class="col-xs-12 col-md-4">Project2</div>
</div>

2. 导航条

在电脑屏幕上看到导航条是这样的。

响应式布局导航条图1

由于导航条上选项比较多,在手机如果也这么展示就会显得很拥挤。我的做法是只展示 logo 和一个小图标,点击图标再弹出具体选项。

响应式布局导航条图2

3. 目录

有一个页面左边显示目录结构,右边显示正文,在电脑屏幕上排版如下图所示。

响应式布局目录图1

在手机上如果还是这个排版,明显会发生挤压。我的做法是默认隐藏目录,只显示正文部分,点击按钮才会显示目录供切换,再点击一次按钮,目录仍会隐藏。

响应式布局目录图2

首页
友链
归档
dkvirus
动态
RSS