px、em、rem、%、vw、vh、vm等単位有什么区别?

大家好,我是IT修真院的学员,一枚正直纯洁善良的web前端程序员

今天给大家分享一下px、em、rem、%、vw、vh、vm等単位有什么区别?

1.背景介绍

传统的项目开发中,我们只会用到px、%、em这几个单位, 它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。 但是从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界, 增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面, 随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来看下这些长度单位有什么区别。

2.知识剖析

1.px

px就是pixel的缩写啦,pixel即像素,它不是自然界的长度单位。 px是就是一张图片中最小的点,一张位图就是由这些点构成的。 1024px就是1024像素,最简单的你可以在windows桌面属性里的“设置”看到, 如果是1024×768,也就是说水平方向上有1024个点,垂直方向上有768个点。 可以画的很小,也可以很大。如果点很小,那画面就清晰,我们称它为“分辨率高”, 反之,就是“分辨率低”。所以,像素的大小是会“变”的,也称为“相对长度”。

2.em

参考物是父元素的font-size,具有继承的特点。 如果自身定义了font-size按自身来计算(浏览器默认字体是16px), 整个页面内1em不是一个固定的值。

字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式, 我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px

3.rem

rem:W3C官网是这样描述的“fontsize of the root element”, root element就是指的根元素html 前面说到的em是相对于其父元素来设置字体大小的, 这样就会存在一个问题,进行任何元素设置,都必须知道父元素的字体大小, 在多次使用中往往会给我们带来无法预知的错误风险。而rem是相对于根元素html不会像em那样, 依赖于父元素的字体大小,而造成混乱。

4.%

% 百分比,相对长度单位,相对于父元素的百分比值

5.vh和vw

vh和vw相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度) 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px。 很容易实现与同屏幕等高的框: 设置一个和屏幕同宽的标题,那标题的字体大小就会自动根据浏览器的宽度进行缩放, 以达到字体和viewport大小同步的效果。

3.常见问题

问题一:

为什么一开始在css样式中给body设置font-size:62.5%?

问题二:

在谷歌浏览器运行以下代码,1em是显示多大的字体?

4.解决方案

答案一:

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px,1.2em=12px利于我们进行换算。

答案二:

谷歌浏览器强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

5.编码实战

6.扩展思考

css还有哪些长度单位?

7.参考文献

px、em、rem、%、vw、vh、vm等単位有什么区别

问题:

1.手机px跟电脑px一样不?

答案:请点击

2.vh在手机上有哪些缺点

答案:请点击

3.vh vw的兼容性问题

答案:请点击

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容