参考： https://www.w3school.com.cn/cssref/css_units.asp

开发中主要用到的是 px、em、%。在css3中的vw、vh使用也慢慢多了起来。

相对于当前DOM元素的font-size。

如果设置当前元素的font-size为0.75em，而其父元素的font-size是16px时，则当前元素的font-size是0.75 * 16px = 12px

如果设置当前元素的width是10em，而当前元素的font-size是16px（无论是继承自父容器还是设置的）时，则当前元素的width是10 * 16px = 160px

注意1：任意浏览器的默认字体高都是16px，如果给body元素的font-size设置为62.5%，那body的font-size实际大小是 16px*62.5%=10px，如果所有子元素都以该字体大小使用em作为尺寸单位，相当于1em=10px，这样设置em就非常简单，只要将实际px数值除以10，就是em单位值。

注意2：em相对于px的值并不是固定的，是会随着父元素或者当前元素的font-size不同而变化

em是CSS3新增的一个相对单位（root em，根em），相对于根节点(一般为html节点)的font-size，如果html节点设置font-size = 100px，那么文档中的元素设置为0.3rem，则计算为：0.3 * 100px = 30px。

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明（通过下边样式覆盖上边样式原理），这些浏览器会忽略用rem设定的字体大小

相对于父元素的长度高度。

注意1：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。

注意2：position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。

CSS3新增样式，部分浏览器（IE8）不支持。

vh、vw：相对于视窗（Viewport）的高度和宽度，而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。

视窗:是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

CSS3新增样式，部分浏览器（IE8）不支持。

vmin：取视窗高度和宽度的最小值作为基准。

vmax：取视窗高度和宽度的最大值作为基准。

例如：浏览器视窗大小为 window.innerWidth=1000px，window.innerHeight=800px，那么，1vmin=800px/100=8px1vmax=1000px/100=10px。

使用场景：做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root（根源），这也就不难理解了。

% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

首先，长度单位一共有两种，分绝对长度单位和相对长度单位；

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。像cm,px这种就属于绝对长度单位；

而相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。像em,ex,%这种就属于相对长度单位。

今天小编要跟大家分享的文章是关于Web前端新手应该知道的CSS长度单位!众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。

因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。为了帮助大家更好的工作小编今天为大家分享一些css的长度单位，希望能够对小伙伴们有所帮助。

1、rem

我们首先介绍下和我们熟悉的很相似的货。em

被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。

Test

body{

font-size:14px

}

div{

font-size:1.2em

//calculatedat14px

*1.2,or16.8px

}

你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小(这里是14px)的1.2倍，结果就是16.8px。

但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。

Test

Test

Test

虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用rem

了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小大部分情况下，根元素就是元素了。

html{

font-size:14px

}div{

font-size:1.2rem

}

这样在上面的那三个嵌套的div娃们的字体大小都是1.2*14px=16.8px了。

2、适用于网格布局

Rems

不仅仅只是在设置字体大小上很方便。再炒个栗子，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，

.container{

width:70rem

//70*14px=980px}

概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。

3、vhandvw

响应式Web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度，而不是父元素的，那该肿么办?这就是

vh和vw单位为我们提供的。

1vh等于1/100的视口高度。栗子：浏览器高度900px,1vh=900px/100=9px。同理，如果视口宽度未750，1vw

=750px/100=7.5px。

可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide{

height:100vh

}

假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有?!

4、vminandvmax

vh和vm依据于视口的高度和宽度，相对的，vmin和

vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px，1vmin=1px，1vmax=

11px。

如果宽度设置为800px,高度设置为1080px,1vmin就等于8px,1vmax则未10.8px。

那么问题来了，我们应该在什么场景下使用这两个单位呢?

假设有一个元素，你需要让它始终在屏幕上可见。

只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：

.box{

height:100vmin

width:100vmin

如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)

.box{

height:100vmax

width:100vmax

}

结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。

5、exandch

ex和ch单位，类似于em和rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。

ch单位通常被定义为数字0的宽度。你可以在Eric

Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。

这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

ex定义为当前字体的小写x字母的高度或者1/2的1em。很多时候，它是字体的中间标志。

x-heighttheheightofthelowercasex

这些单位有很多用途，大部分用于版式的微调。比方说，sup元素(上角文字标)，可以通过position:relativebottom:1ex实现

。

类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用

上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

sup{

position:relative

bottom:1ex

}

sub{

position:relative

bottom:-1ex

}

结论

持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的全部技能。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。

以上就是小编今天为大家分享的额关于Web前端新手应该知道的CSS长度单位的文章，希望本篇文章能够对正在从事web前端工作和喜欢web前端技术的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！

---