当前位置：首页 > news >正文

【小白学HTML5】一文讲清常用单位（px、em、rem、%、vw、vh）

news 来源：原创 2025/5/11 8:45:41

html5中，常用的单位有px、em、rem、%、vw、vh（不常用）、cm、m等，这里主要讲解px、em、rem、%、vw。

学习了解：主流浏览器默认的字号：font-size:16px，无论用什么单位，浏览器最终计算为像素px。

1、绝对单位 px，也称为像素，所谓绝对单位就是不随着网页的大小等变化的单位。

<style>
.box{width:160px;height:160px;background-color:red;}
</style>
<!-- 定义box -->
<div class='box'></div>

如上述的的盒子box的宽高就是160px，是固定的，不会随着浏览器或其他元素的变化而变化，因此也叫绝对的单位。

2、相对单位 em，所谓相对单位是相对于网页中的元素而言的。

默认情况下，1em = 浏览器的默认字号，即1em = 16px，因此上面的代码可以改为一下代码。

em受font-size字号的影响，如果设置了font-size:32px，思考一下会发生什么呢？当font-size设置为32px时，此时的1em = 32px，相应的box盒子也增大了一倍。

em受父元素的影响，一般情况下电脑端用em。

<style>
/* .box{width:160px;height:160px;background-color:red;} */
.box{width:10em;height:10em;background-color:red;}
</style>
<!-- 定义box -->
<div class='box'></div>

3、相对单位rem，可以理解为root（根）em。

所谓根字号或者根单位，默认是16px，除非认为去更新默认的字号，否则不变，不收祖先元素的影响，只受根字号的影响。同样的font-size不要再用16px表达，而是用font-size:0.5rem的形式进行表达，一般情况下，移动端用rem

<style>
html{
font-size:32px;
/*此时的 1rem = 32px*/
}
/* .box{width:160px;height:160px;background-color:red;} */
.box{width:10rem;height:10rem;background-color:red;font-size:0.5rem}
</style>
<!-- 定义box 此时的box大小为320px-->
<div class='box'></div>

4、百分比%，以父元素为参照我。

<style>
.box{width:160px;height:160px;background-color:red;}
.box .item {width:50%}
</style>
<!-- 定义box -->
<div class='box'>
    <div class='item'></box>
</div>

父元素box为160px，那么item的宽度应为80px

4、视口单位vw和vh，视口就是viewport的意思。视口就是可视窗口的意思。

vw是视口宽度，vh视口高度，视口单位和百分比%相似，视口是以窗口的宽高作为基准，百分号是以父元素作为基准。

vh和vw是表示视窗高度和宽度的相对单位。其中，1vh等于视窗高度的1%，而1vw等于视窗宽度的1%。这些单位通常用于响应式设计中，以便根据用户设备的屏幕大小调整元素的尺寸和布局。