一、px（像素）

【绝对单位，页面按精确像素展示】

px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

px 是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等, 它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI

px 单位的值必须是整数值

与px相关的一些单位

in - 表示英寸，是一个物理单位，在CSS中被直接映射成为px; 转换的方法是 1in = 96px

cm - 表示厘米，在生活中常用的单位，同样被映射为 px; 转换方法为 1cm = 37.8px

mm - 表示毫米，与cm类似，转换方法为 1mm = 0.1cm = 3.78px

二、em

参考物是父元素的font-size，具有继承的特点。

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

浏览器默认字体是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

em和px的关系 em是指字体高度

浏览器默认1em=16px,

所以0.75em=12px;

我们经常会在页面上看到根元素写的font-size:65%;

这样em就成了16px*62.5=10em;

这是显示在页面的字体大小是10px;

这样

12px=1.2em,

10px=1em,

也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了,

em的特点

em是个相对值他会根据父级元素的大小而变化

但是如果嵌套了多个元素要计算它的大小,是件很头疼的事情

这样的情况下,就出现了rem

rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到

【em 与 px 的计算关系】

em的值是px的倍数

默认情况下font-size = 16px,那么1em = 16px

em 如何修改与px的相对计算关系

我们可以在自己元素上面修改font-size : 32px，从而1em = 32px

如果自己元素上面没有设置font-size, 我们也可以在父元素上面设置font-size，从而来影响自己元素（孩子元素）使用的em的值。

【深度解析】

相对长度单位，取决于目标元素字体尺寸。

em 单位的值等于基本元素或父元素的字体大小。

例如，如果父元素的字体大小为16px，则所有直接子元素中的1em值将计算为16px。基于基本单元的知识，可以很方便的增大或减小子元素的字体大小。这里的值不需要是整数。

使用em可以轻松地将各种元素的字体大小保持在固定比例。

例如，如果父元素的font-size的值为50px，则将子元素的字体大小设置为2em, 相当于设置为100px。类似的，将它设置为0.5em将使得子元素的字体大小为25px。

另外有一点需要注意：如果想要通过 em 设置当前元素的大小值，并且不是相对于直接父元素，而是相对父元素的父元素或者根元素，就会变得很复杂，因为每一层都要进行计算

例如:

<div class="parent"><div class="child1"><div class="child2"></div></div>
</div>.parent {font-size: 20px;
}.child1 {font-size: 1.5em;
}.child2 {font-size: 1.2em;
}

那么就需要经过计算: child1的字体大小为 20 x 1.5 = 30px , 而 child2 的字体大小就等于 20 x 1.5 x 1.2 = 36px

结论：之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果

三、rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

CSS3中加入的相对长度单位，取决于文档根元素（通常为:root）的字体尺寸，适用于依据字体尺寸进行的排版，适用于自适应。

rem 也是一个相对单位，与 em 的不同点在于rem的长度总是相对于根元素, 而不是像 em 使用级联的方式来计算尺寸。这种单位使用起来就简单很多

同样是上面的例子，不过使用的单位是 rem

<div class="parent"><div class="child1"><div class="child2"></div></div>
</div>.parent {font-size: 20px;
}.child1 {font-size: 1.5rem;
}.child2 {font-size: 1.2rem;
}

那么就需要经过计算:

child1的字体大小为 16 x 1.5 = 24px ,

而 child2 的字体大小就等于 16 x 1.2 = 19.2px ;

这里为什么是使用 16 来乘而不是 20 呢？

这就是因为rem的长度总是相对于根元素, 就是指 html, 而 html文档中默认字体大小为 16px,

因此这里使用 16来计算

【rem 与 px 的计算关系】

rem的值是px的倍数

默认情况下font-size = 16px,那么1rem = 16px

rem 如何修改与px的相对计算关系

我们可以在并且只能在html标签（因为html节点是根节点，就是rem里面的r：root）里面修改font-size : 32px，从而1rem = 32px

代码

 /* rem的用法 */
html{
font-size:16px;  // 1rem = 16px
} .div-rem{
width: 10rem;    // 10rem = 10 x 16 = 160px
height: 10rem;   // 10rem = 10 x 16 = 160px
font-size: 1rem; // 1rem = 16px
background-color: #a58778;
}

(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算：

var ele=document.getElementsByTagName("html")[0],
size=document.body.clientWidth/320*20;
ele.style.fontSize=size+"px"

注：需设置meta缩放比1:1

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no, minimum-scale=1, initial-scale=1,target-densitydpi=low-dpi" />

不懂的可以看这篇文章

前端HTML的meta设置-前端必看_cplvfx的博客-CSDN博客

四、百分比%

常见 相对长度单位，相对于父元素的尺寸的取值，实际使用中，如果父元素是一个非稳定的取值，可能会导致父元素被撑开，而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值，并不适用于解决自适应问题。

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

元素宽高与字体大小使用区别：

（1）尽量使用相对尺寸单位

使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

（2）字体尺寸尽量使用em、rem

为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。

五、vw和vh

vh vw全称为Viewport Height和Viewport Width 意思就是视窗

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

CSS3中加入的相对长度单位，取决于浏览器视窗的宽（高），1vw 即为浏览器视窗宽度的1/100，适用于依据屏幕宽或高进行的排版，适用于自适应。

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px，很容易实现与同屏幕等高的框。

calc + vm 计算宽度

width: 800px;
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。

(ps:比如你需要定位一屏内的一段文字,如果你用% 它计算的是你整个dom的高度,而vh计算的当前一屏的高度)

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Androidbrowser4.4+支持，chrome for android39支持

六、vmin和vmax

vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Androidbrowser4.4+支持，chrome for android39支持

CSS3中加入的相对长度单位，取决于浏览器视窗的宽或高中最小（最大）尺寸的轴，适用于依据屏幕最值宽或高进行的排版，适用于自适应。

七、pt （点）

pt:point，大约1/72寸

绝对长度单位，多用于字体尺寸，1px = 0.75pt。

八、in:寸

in - 表示英寸，是一个物理单位，在CSS中被直接映射成为px; 转换的方法是 1in = 96px

九、cm:厘米

cm - 表示厘米，在生活中常用的单位，同样被映射为 px; 转换方法为 1cm = 37.8px

十、mm:毫米

mm - 表示毫米，与cm类似，转换方法为 1mm = 0.1cm = 3.78px

十一、pc

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

十二、ex

取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

十三、ch

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,iOS safari 7.1+,Android browser4.4+支持)

附：

绝对长度单位换算公式： 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

参考文章

CSS 中px、em、rem、%、vw、vh单位之间的区别详解 - html中文网

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 - html中文网

css的常用长度单位有哪些？ - html中文网

浅析CSS中单位px、rem、em、vh、vw之间的区别 - html中文网

浅析rem和em和px vh vw和% 移动端长度单位 - html中文网

css中em和px的区别是什么？ - html中文网

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】相关推荐

CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
web开发之长度单位：px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位和相对长度单位. 绝对长度单位绝对长度单位是一个固定的值,一个 ...
php 点号的用法,基于php中echo用逗号和用点号的区别详解
php 的基于php中echo用逗号和用点号的区别详解实例如下: echo 1+5; echo " "; echo '1+5='."1+5"." ...
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
深究--CSS中px、rem与em的区别
前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX.rem与em. 目录: 一.PX 1.概念: ...

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】