单位性质是填什么_html em vw,px、em、rem、%、vw、wh、vm等单位有什么区别？

这里是修真书院的前端课堂，每篇分享文章都从

[背景介绍][知识解析][常见问题][解决方案][编码实践][延伸思考][更多讨论][参考文献]

八个方面深入解析前端知识/技能。本文分享：

【px、em、rem、%、vw、wh、vm等单位有什么区别？】

1. 背景

在传统的项目开发中，我们只会使用px、%、em，这几种单位适用于大多数项目开发，兼容性也不错。但是你知道吗？从CSS3开始，浏览器对逻辑单位的支持又上升了一个台阶，增加了一些新的长度单位，比如rem、vh、vw、vm。我们可以利用这些新单位来开发更好的响应式页面，覆盖各种不同分辨率的终端，包括移动设备。现在我们来看看这几种长度单位的区别。

2.知识分析

1. 像素

px是pixel的缩写，px是图像中最小的点，一个位图就是由成千上万个这样的点构成的，比如我们常听到的计算机像素是，也就是水平方向有1024个像素，垂直方向有768个像素。

兼容性：

2. em

引用的是父元素的font-size，具有继承的特性，如果自己定义font-size的话，都是按照自己来计算的（浏览器默认字体大小是16px），而且1em在整个页面内并不是一个固定的值。

兼容性：

3. rem

新的CSS3单位是相对于根元素HTML（网页）的font-size而言的，而不会像em那样依赖于父元素的font-size，避免造成混淆。

兼容性：

4.%

一般来说是相对于父元素的，但是这个不太准确。

1.对于普通的定位元素来说，就是我们理解的父元素

2. 对于： ；该元素相对于定位的父元素

3. For：固定；元素相对于（可见窗口）

兼容性：

3. 大众

一个新的CSS3单位，宽度的缩写，视口宽度。1vw等于视口宽度的1%。

例如：浏览器宽度，1 vw = /100 = 12 px。

兼容性：

4. vh

CSS3新单位窗口高度的缩写，1vh等于窗口高度的1%。

例如：浏览器高度900px，1 vh = 900px/100 = 9 px。

兼容性：

4. 虚拟机

新的 CSS3 单位，相对于视口宽度或高度中较小的一个。其中最小的一个被均等地划分为 100 个 vm 单位

例如：浏览器高度为900px，宽度为最小浏览器高度，1 vm = 900px/100 = 9 px。

由于现在VM的兼容性比较差，这里就不展示了。

你可以随意旋转。如果比例改变，我就输了。

3. 常见问题

vh vw vm的实际应用场景有哪些？

4.解决方案

vh vw 是视口宽度不包括页面滚动条（），%包括滚动条宽度（）。

总体来说%已经可以满足大部分自适应设计的需求了，可以使用:100vh来做出充满屏幕的自适应高度，并且不带滚动条。

用vw和vh设置的尺寸只和窗口大小有关，所以这个单元相当适合开发多屏幕设备的应用程序。

5. 实用编码

点击这里

6.拓展你的思维

CSS 中还有哪些其他长度单位？

英寸：英寸

cm：厘米

mm：毫米

t：点，约 1/72 英寸

pc:pica，约 6pt，1/6 英寸

1 英寸 = 2.54 厘米 = 25.4 毫米 = 72pt = 6pc = 96px

7. 参考文献

参考1：你知道这7个CSS单元吗？

参考2：CSS长度单位值测试示例页面

“我们相信每个人都可以成为工程师。现在就开始，找一位前辈来指导你。你将不再在学习的路上迷失。

这里就是技能树.IT修炼学院：新手转行互联网行业的聚集地。

欢迎加入IT交流群和大家一起讨论