因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。为了帮助大家更好的工作小编今天为大家分享一些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培训官网。最后祝愿小伙伴们工作顺利！
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem} /* 1.4 × 10px = 14px */
/ 在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ） /
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
两者使用规则：
*
如果这个属性根据它的font-size进行测量，则使用em
*
其他的一切事物属性均使用rem
vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
/*
如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
*/
其他单位：
%（百分比）
一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute的元素是相对于已定位的父元素
3、对于position: fixed的元素是相对于ViewPort（可视窗口）
css3新单位，相对于视口的宽度或高度中较小的那个
其中最小的那个被均分为100单位的vm
比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px
缺点：兼容性差
1、假如使用em来设置文字大小要注意什么？
注意父元素的字体大小，因为em是根据父元素的大小来设置的。
比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套里面更要注意）
2、pc pt ch一般用在什么场景？
这些我们网页设计基本上用不到，在排版上会有用处
3、如何使 1rem=10px
在设置HTML{font-size：62.5%；}即可
4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比则没有效果
常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。
（1）像素 （ px ）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
（2）百分比 （ % ），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
（3）em和rem 相对于px更具灵活性，它们都是相对长度单位，它们之间的区别： em相对于父元素，rem相对于根元素。
（4）vw/vh 是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
vw/vh 和百分比很类似，两者的区别：
