整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
写本文的目的主要是为了后面写H5的相关知识，而且文本中会提到日后要写的关于H5的三篇（文中加粗长字体）文章的内容，关于H5这个专题感兴趣的童靴可以关注我的号。
国内大都喜欢用px，而国外的网站大都喜欢用em和rem，然而，这三者到底有什么区别了？
下面一个一个来看：
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。在PC侧，这CSS的1px往往都是对应着电脑屏幕的1个物理像素（分辨率），移动设备则不是这样的，知道这一点对移动网页开发很重要，下回专门来总结这个。
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
什么意思了？下面实例解释一下。
1、暂且认为任意浏览器的默认字体高都是16px（真的是这样吗？这可是移动开发的一个大大的坑啊，这里为了讲单位，先这样认为罢了，有关这个疑问，我们下回来分析它及其解决办法）。
所有未经调整的浏览器都符合：1em = 16px。那么12px=0.75em，10px=0.625px。
然而，为了简化font-size的换算，我们可以这么做：
设置：body{font-size:62.5%}
这样的话，1em=62.5%*16=10px，也就是说只需要将你原来的px数值除以10，就是em单位的数值了。如：
12px=1.2em
2、em的值并不是固定的，它会继承父元素的字体大小。
比如下面这段代码：
由上面图可知，html元素上我们设置了字体大小为16px。p元素的字体大小我们设置了2em，也就是2*16=32px。在往下span元素，我们设置它的字体大小0.5em，这个时候的基准大小相对它的元素。即（1em=32px），也就是0.5*32=16px。下面看一下效果：
由此可见，当元素嵌套一旦变多的时候，em就会显得很无助。好在我们还有另外一个单元rem。
rem是CSS3新增的一个相对单位（root em，相对根元素），这个单位引起了大家的广泛关注。它与em一样是相对单位，只是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。（rem真的就成了我们移动布局的神器了吗？听我日后分析）
举个例子：（还是上面那个例子，除了将p和span的字体大小单位改成rem，还将span的字体大小改成1）
p元素字体大小2rem，相当于就是2*16=32px。span元素的字体大小1rem，相当于就是1*16=16px。所以效果和em的一样。
这个时候需要注意，为了方便计算，可以将html元素定为62.5%（也就是使用浏览器默认字体16px）,这样，往后的元素以rem为单位，值就只要PX的值除以10就行。
为了提高开发效率，有关单位px、em、rem转换，也可以借助一些在线的转换工具，如pxtoem。
传统的项目开发中，我么只会用到px、%、em这几个单位，它们可以适用于大部分的项目开发，并且具有良好的兼容性。
从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位。
利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等。
在css单位中，可以分为长度单位、绝对单位，如下表所指示
CSS单位 | |
相对长度单位 | em、ex、ch、rem、vw、vh、vmin、vmax、% |
绝对长度单位 | cm、mm、in、px、pt、pc |
今天我们主要讲讲px、em、rem、vh、vw、vm之间的区别
px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了。
特点：
举个例子:
<div class="big">
我是14px=1.4em<div class="small">我是12px=1.2em</div>
</div>
<style>
html {font-size: 10px; } /* 公式16px*62.5%=10px */
.big{font-size: 1.4em}
.small{font-size: 1.2em}
</style>
复制代码这时候.big元素的font-size为14px，而.small元素的font-size为12px
rem，相对单位，相对的只是HTML根元素font-size的值。同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%。
html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
复制代码这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助
特点：
vw是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。
这里的窗口分成几种情况：
像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。
举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
作者链接：https://juejin.cn/post/6945618076087894052
想要成为一名合格的前端工程师，会写页面绝对不能少，而如果想要页面写得出彩，你必须要知道一些网页常用的基本单位。
在传统的项目开发中，我们常常会用到px、%、em这几个单位，因为它能适用于大部分的项目开发，而且拥有比较良好的兼容性。但素，你造吗？从CSS3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vw、vh、vm等一些新的长度单位，我们可以用这些新的单位开发出比较良好的响应式页面，以此可以覆盖多种不同分辨率的设备，包括移动设备等。
那么，接下来我们分别来分析下，这些常用到的单位分别是什么。
1．px
px就是pixel的缩写，像素，相对长度单位，像素是相对于显示器屏幕分辨率而言。比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。再比如，px就可以认为是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的。
2.em
相对长度单位，参考对象是父元素的font-size，具有继承的特点，如果当前行内文本的字体尺寸未被设置，浏览器使用默认字体尺寸（16px），整个页面内1em也不是一个固定的值。
3.%
一般宽泛的讲是相对于父元素，但是并不是绝对的。
1）、对于普通元素就是我们理解的相对于父元素
2）、对于position: absolute;的元素是相对于已定位的父元素
3）、对于position: fixed;的元素是相对于ViewPort（可视窗口）
4.rem
rem是css3的新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
例如：
p{font-size:14px;?font-size:.875rem;}
但是，需要注意的是：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。一般rem用在移动端可能更多些。
5.vw
vw是css3新单位，viewpoint width的缩写，即视口宽度。何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。视口宽度被均分为100单位的vw，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。
6.vh
与vw类似，vh就是可视窗口的高度了。视口高度被均分为100单位的vh，1vh就是高度的1%。看下图：
7.vm
vm也是css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。
举个栗子：浏览器高度800px，宽度1000px，取最小的浏览器高度，1 vm = 800px/100 = 8 px。
由于现在vm的兼容性较差，现在基本上很少有人用。
除了上述7种单位，css还有哪些长度单位？
例如：
in 寸
cm 厘米
mm 毫米
pt point磅，大约1/72寸
pc pica派卡，大约6pt，1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
*请认真填写需求信息，我们会在24小时内与您取得联系。
