了解 em 和 rem 的使用

设备像素比(device pixel ratio)

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

设备像素比 = 物理像素 / 设备独立像素

在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。

而在CSS中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下,1个css像素对应 4个物理像素(1:4)。

例如在iPhone6设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt

meta标签

写移动端页面时,通常需要加入如下meta标签

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

上面的content属性有

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:同上

initial-sacle:初始缩放比例

maximum-sacle:最大缩放比例

minimum-scale:最小缩放比例

user-scalable:是否允许设备缩放页面

通过这个meta标签,可以让页面以设备窗口大小来友好显示页面

em和rem

使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。

em和rem的区别

看上面的例子,em和rem好像没什么区别,其实em和rem的主要区别是以谁为标准,rem是以根元素(html)的字体大小来确定自身的值,而em是根据父元素来确定自身值

例如下面代码

<!DOCTYPE html>
<html style="font-size: 12px;">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<style type="text/css">	
	.parent {
		font-size: 10px;
	}
	.child {
		font-size: 2em;
	}
	</style>
</head>
<body>
<div class="child">rem字体 12px * 2 = 24px</div>
<div class="parent">
	<div class="child">
	em字体 父元素字体 10px * 2 = 20px
	<div class="child">
		em字体 父元素字体 20px * 2 = 40px
	</div>
	</div>
</div>
</body>
</html>

效果如下

em应用场景

设计组件比如按钮,菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候,你希望整个组件都适当缩放

通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

当使用 em 单位,他们使用的元素的字体大小应设置对rem单位,以保留的可扩展性,但避免继承混淆。

通常不使用 em 单位控制字体大小

rem应用场景

rem可以等比例缩放元素,只要html元素给一个标准就行,适用于多屏设备等比例适配屏幕

不要使用 em 或 rem 的场景

多列布局

布局中的列宽通常应该是 %,因此他们可以流畅适应无法预知大小的视区。

然而单一列一般仍然应使用 rem 值来设置最大宽度。

例如:

.container {
    width: 100%;
    max-width: 75rem;
}

这保持列的灵活,可扩展。又能防止变得太宽了。

当元素应该是严格不可缩放的时候

在一个典型的 web 设计的过程中,不会有很多部分的你不能使用伸缩性设计的布局。 不过偶尔你会遇到真的需要使用显式的固定的值,以防止缩放的元素。

采用固定的尺寸值的前提应该是,如果被缩放的话,它的结构会被打碎。 这真的不常出现,所以你想拿出那些 px 单位之前,问问自己是否使用它们是绝对必要的。