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

最新推荐文章于 2024-07-21 16:35:41 发布

橙-极纪元JJY.Cheng

最新推荐文章于 2024-07-21 16:35:41 发布

阅读量9.1k

点赞数 18

分类专栏： # CSS 前端HTML 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cplvfx/article/details/125402868

版权

前端HTML 同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

CSS

30 篇文章 2 订阅

订阅专栏

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