网页开发的尺寸单位
平时写pc端页面时,一般是px作为单位,遇到一些比较复杂的需要定位的也会夹杂使用百分比;但是在移动端时候px很容易布局就会乱,如果使用的是相对单位比如 em,rem
下面就说他们之间的区别
单位与区别:
-
px:像素,相对于屏幕分辨率而言的,简单来说就是平时我们写静态页面时用px作单位,但是在firefox/chrome会发现我们的布局发生了变化;
-
百分比:这比较适合块状的页面设计,但是他相对于不同屏幕而言的,比如经常在写移动端的时候也会用到
-
em:是相对长度单位,相对于父级元素的单位。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。就是当默认字体大小为14px,那么就有1em=14px;
-
rem:是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。
移动端单位rem和em
rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的,而em是继承父元素的字体。比如下面一个demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test REM</title>
<style>
html {
font-size: 40px;
}
body {
font-size: 20px;
}
.em,
.rem {
font-size: 14px;
}
.em span {
font-size: 1em;
}
.rem span {
font-size: 1rem;
}
</style>
</head>
<body>
<div class="em">
<span>font-size使用em</span>
</div>
<div class="rem">
<span>font-size使用rem</span>
</div>
</body>
</html>
从效果图上明显的可以看出连个span标签中的文本大小不一样:
第一个span继承了它的父元素div的大小,所以是14px,第二个span是通过html来计算的,所以是40px;
通过这个简单的例子我们得知上面的结论是正确的。所以我们可以通过下面这种比例来对不同的手机屏幕做适配。
rem和em与px的换算
px/rem = 基值(em指的是自己元素上的font-size的值,rem指的是html中font-size的值)
px | rem | 基数 |
---|---|---|
8px | 0.5rem | 16px |
10px | 0.625rem | 16px |
12px | 0.75rem | 16px |
13px | 0.8125rem | 16px |
14px | 0.875rem | 16px |
16px | 1rem | 16px |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test REM</title>
<style>
html {
font-size: 16px;
}
.rem span {
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="rem">
<span>font-size使用em</span>
</div>
</body>