取值单位（px，em，rem，%，vh，vw）的详解

编程入门行业动态更新时间:2024-10-25 00:27:22

取值单位（px，em，rem，%，vh，vw）的<a href=https://www.elefans.com/category/jswz/34/1770044.html style= 详解"/>

取值单位（px，em，rem，%，vh，vw）的详解

取值单位（px，em，rem，%，vh，vw）的区别
取值单位的分类

1、固定单位（绝对单位）：px

px：像素（pixel）的缩写，是一个相对长度单位，像素px是相对于屏幕分辨率而言的

2、相对单位：em，rem，%，vh，vw

**em：**相对长度单位，相对于当前对象内文本的字体尺寸【是所在标签的字体大小】（参考物是父元素的font-size），

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

em的值并不是固定的；
em会继承父级元素的字体大小；
例子，例如父元素为浏览器(google chrome)的默认字体尺寸，16px,则font-size:1em=16*1=16px;

1.5em=16*1.5=24px

rem:是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

（适用场景）

1、移动端开发

注：HTML根元素的含义

HTML文档的根元素是 html 元素，从标签开始，到标签结束。根元素的作用就是告诉浏览器，在和之间的内容是HTML类型，浏览器便按HTML进行解析其中的内容。

   html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
   body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
   /*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）*/
123
1
2
3
4
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：

rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
两者使用规则：

如果这个属性根据它的font-size进行测量，则使用em
其他的一切事物属性均使用rem

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）

vw（取视口的百分比）：css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
vh（取视口的百分比）：css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
vw、vh、vmax、vmin这四个单位都是基于视口

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

举例（for exmple）：(?如何表达vh、vw的属性值)

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