技术干货：CSS相对单位

现在一提到响应式布局，css相对单位，相信众多前端行业的小可爱们都知道em|rem，再者是现在大家都比较熟知的视口单位 vh|vw。

emm…在说这些之前，让我们回顾一下CSS单位的历史。

早期 Pixel (px)

在web环境下，用户可以将浏览器窗口设置成任意大小，CSS需要去适应它，而且用户在打开一个页面之后，还会再去调整它的大小，CSS也需要去适应这些条件。由此我们可以知道，在创建页面的时候，样式并没有被调用，而是当页面开始渲染时，浏览器才会去计算样式的规则。

那么早些时候是如何解决设备窗口自适应的问题呢。

早些时候，我们的设计大大们就想出了完美像素设计，解放了前端工程师们的双手，设计师们会创建一个有效宽度的容器，例如800px-950px宽的居中纵向列，也这个为基准再进行设计，这跟他们在原生应用程序或印刷出版物中做的设计或多或少有点类似。

然后后来，有多年经验的前端应该能感受到，显示屏的分辨率越来越大，之前的950px的有效宽度开始延伸到1024px，但是兼容小分辨率屏幕使得这个问题变得不可解。而使得开发者不得不放弃“完美像素”设计的起因，是因为智能手机的普及。

于是，响应式设计应运而生！！

响应式 —— 在CSS中，这指的针对不同大小的浏览器窗口，用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。我们将在第8章中详细介绍响应式设计，但在本章中，我会先给大家介绍一些重要的基础概念。

开发人员曾经的宠儿（px）就要下线了。这里要提一下，CSS里1像素并不严格等同于显示器的1像素，在高分辨率显示器上更加明显。尽管根据浏览器、操作系统和硬件的不同，CSS的测量值可能会有细微的差别，但96px总是会大致等于屏幕上的物理1英寸。

em 的用法

先来看看em，em是最为常见的相对长度单位，基准是当前元素的字号大小（font-size），例如：

1

2

3

4

.box {

font-size: 16px;

padding: 1em; // padding: 16px;

}

把padding赋值为1em，乘以字号，得到一个值为16px的padding渲染值，因为该元素的字号是16px，以此类推要2em = 16px * 2 = 32px; 使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。

em 通常用法

在设置padding、height、width或border-radius等属性时，使用em可能会很方便，因为如果它们继承了不同的字号大小，或者用户更改了字体设置，这些属性会均匀地缩放。

可以测试看看效果，熟悉一下不同盒子下em的用法。

HTML:

1

2

Small

Large

CSS:

1

2

3

4

5

6

7

8

9

10

11

.box {

padding: 1em;

border-radius: 1em;

background-color: lightgray;

}

.box-small {

font-size: 14px;

}

.box-large {

font-size: 16px;

}

用于font-size

em是基于font-size去计算的，那么如果用在font-size上呢？

1

2

3

4

5

6

7

8

猜猜我的字号是多少？

// css

.box{

font-size: 1.2em;

}

上面这种情况，em会以父元素的字号为基准，例如box的父元素是body，则会以body的font-size大小为基准。一般情况下我们会声明body的字号大小，如果没有声明，则以浏览器的默认样式为主

通常情况下浏览器有默认的css样式，每个默认的样式都是不同的，看看下面例子：

1

2

3

4

5

6

7

8

body {

font-size: 16px;

}

.box {

font-size: 1.2em; // 19.2px

padding: 1.2em; // 23.04px

background-color: #ccc;

}

box的font-size是基于body的字号大小计算的，而padding则是基于box的font-size计算的，所以是19.2 * 1.2 = 23.04px。

可以尝试用em去做多层的嵌套列表，可以做出字号层层收缩的效果，例如ul，li列表。

rem 的用法

rem 顾名思义是 root em 的缩写，和em不同的是，em是依赖当前元素，而rem是和根元素关联的。

说到根元素，大家可以先认识一下一个特别的伪类选择器 - :root

1

2

3

4

5

6

:root { /* 等同于 html 选择器 */

font-size: 1em; // 16px,浏览器的默认字号大小

}

ul {

font-size: .8rem; // 16 * 0.8 = 12.8px

}

在这里 0.8rem 无论放在什么地方，都等同于0.8倍的根元素的字号大小。

很简单吧~ 当然rem也好em也好都只是一种方式，如果去搭配使用还是要看个人对页面布局的理解。比如说，对font-size使用rem，因为现在很多浏览器可以通过ctrl- 和 Ctrl+ 对页面进行缩放，rem只依赖根元素，这样不会产生字号收缩的问题，字号大小变得可预测。而对padding、margin、border-radius等使用em则会更好，因为这些度量方式只是针对当前的元素来看的。在然后border的宽度则用px比较好，因为边框这个一般不会根据页面放缩去做计算的。

视口单位 vh | vm

我们知道em和rem都是以font-size为基准的，而视口单位是依靠浏览器的视口大小来定义长度的。

视口（viewport） —— 在浏览器窗口中用来渲染页面的可视区域，这不包括浏览器的地址栏、工具栏、状态栏等（如果有的话）。

常见的视口单位：

vh —— 视口高度的1/100

vw —— 视口宽度的1/100

vmin —— 视区宽度或高度较小值的1/100（IE9支持的是vm）

vmax —— 视区宽度或高度较大值的1/100（在写本书时，IE或者Edge都不支持）

举个例子，50vw等于视口宽度的一半，而50vh等于视口高度的50%。vmin依赖两者（宽或高）的较小值，如果我们需要确保一个元素不管在横屏还是竖屏下适应屏幕展示的话，这个属性会很有帮助：如果是横屏，vmin的基准值是屏幕的高度，如果是竖屏，它的基准值是屏幕的宽度。

1

2

3

4

5

.box {

width: 90vmin;

height: 90vmin;

background-color: #369;

}

这里笔者就不截图了，大家试试看就知道了（笑）。

vw用于font-size

同样我们来看看视口单位用在字号上会发生什么。

加入我们设置一个元素的font-size: 2vm；会怎么样呢。假设PC屏幕宽 1400px，那么2vm等于28px，pad的屏幕768px宽，2vm等于15px。可以看出问题了吧~ 28px的字体对于PC来说太大了，而这个你放到手机屏幕上，经过计算字号会小于10px，这个效果就不太好了。

这样我们就有个新的方法！！！

calc()

calc()函数支持对2个或者更多个数值进行基础的运算。

注意：使用加减运算的时候左右必须要有空格，例如calc(3em + 16px)。

好了为了解决vw在font-size使用造成的漏洞，我们可以尝试：

1

2

3

:root {

font-size: calc(0.5em + 1vw);

}

0.5em这里表示字号的最小值，1vw代表根据设备宽度响应式的网上叠加，这样你就会发现字体收缩就正常多了。

总结

当然要实现响应式的设计，不仅仅是灵活的运用好这些相对单位，而细节上的细微的调整可能还是需要依赖媒体查询的代码，但是现在的前端开发者们要慢慢停止使用px思维去思考布局，CSS的东西看上去简单，实际上深入学习有很多意想不到的优势，需要大家多多探究，辣么，笔者就先写到这里了。

[ShareSDK] 轻松实现社会化功能 强大的社交分享

[SMSSDK] 快速集成短信验证 联结通讯录社交圈

[MobLink] 打破App孤岛 实现Web与App无缝链接

[MobPush] 快速集成推送服务 应对多样化推送场景

[AnalySDK] 精准化行为分析 + 多维数据模型 + 匹配全网标签 + 垂直行业分析顾问

BBSSDK | ShareREC | MobAPI | MobPay | ShopSDK | MobIM | App工厂

截止2018 年4 月，Mob 开发者服务平台全球设备覆盖超过84 亿，SDK下载量超过3,300,000+次，服务超过380,000+款移动应用