CSS中px,em,rem,%,vw,vh单位之间的区别详解
这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值。
1 、px
px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。
2、em
参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。
字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px1.5em = 24px class为id2的div字体大小继承自父元素id1:24px1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px
em相关补充知识:
- 通常情况下,用户的浏览器默认渲染的文字大小是 16px。
- 用户可以通过重新定义根标签(或者父元素标签)的 font-size 属性来重新定义默认的文字大小
- 在响应式布局中,页面中的所有元素都使用额 em 单位值,em 是一个相对的大小,默认情况下 1em=16px
- 相对的大小计算的的参考物是指元素父元素的 font-size 的属性
- 比如一个在
<div>
设置字体大小为 16px,此时这个的后代元素就基层了他的字体大小- font-size 属性具有继承性。
3、rem
rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
rem相关知识:
1,rem说明:相对长度单位,相对于根元素(即html元素)的font-size来计算
2,rem与px的转换
rem是相对于根元素html的font-size的属性来计算的。
所以我们只需要在html根元素确定一个参考值(font-size),这个参考值设置为多少,完全可以根据您自己的需求来定。1
2
3
4
5
6
7
8
9
10
11
12
13html 默认 font-size = 16
px | rem
- - - - - - - - - - -
12 | 12/16 = .75
14 | 14/16 = .875
16 | 16/16 = 1
18 | 18/16 = 1.125
20 | 20/16 = 1.25
24 | 24/16 = 1.5
30 | 30/16 = 1.875
36 | 36/16 = 2.25
42 | 42/16 = 2.625
48 | 48/16 = 31rem 就等于html根元素设定的font-size的px值
4、%
% 百分比,相对长度单位,相对于父元素的百分比值
元素宽高与字体大小使用区别:
1,尽量使用相对尺寸单位
使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部DOM结构,重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置。
2,字体尺寸尽量使用em、rem
为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层以上的字体相对尺寸的设置,可以考虑使用rem。
5、vw和vh
vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
具体描述如下:
- vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
- vh:视窗高度的百分比
- vmin:取当前Vw和Vh中较小的那一个值
- vmax:取当前Vw和Vh中较大的那一个值
vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。
单位 说明 vw:viewpoint width 视窗宽度,1vw等于可视窗口宽度的1% vh:viewpoint height 视窗高度,1vh等于可视窗口高度的1% vmin vw和vh中较小的那个 vmax vw和vh中较大的那个 calc + vm 计算宽度
1
2
3
4width: 800px;
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);