Px、em、rem、%、vw、wh、vh、vmin、vmax等单位的区别!

1.背景介绍

随着CSS的发展和版本的迭代,我们能能使用的标签也随之增多,有许多标签虽然在结果上表现出来十分相似,

但如果不理解其内涵和意义,容易引起编程规范上的错误,

本次小课堂会分享文本格式、图像的文字注释和替代以及链接的一些属性,对他们进行区分学习

2.知识剖析

2.1、绝对单位: px,pt,cm,mm这些定值都是固定的,不会随着屏幕的宽度改变而改变。

px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位,。

in:英寸,绝对长度单位。

cm:厘米,绝对长度单位。

mm:毫米,绝对长度单位。

pt:point,大约1/72寸,绝对长度单位。

pc:pica,大约6pt,1/6寸,绝对长度单位。

相对单位:em,rem,%、em、rem、vw、wh、wmin、wmax相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px,则2em == 32px;),整个页面内1em不是一个固定的值。em会继承父级元素的字体大小。

rem:相对单位(root em,根em)。但相对的只是HTML根元素,相对根节点html的字体大小来计算。

百分比相对单位:vw、vh、vm、vmax、vmin、%。

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。

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

vmax:vw和vh中较大的那个

%:百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。

3.常见问题

em和rem有什么区别?

4.解决方案

“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素。

你可能感兴趣的:(Px、em、rem、%、vw、wh、vh、vmin、vmax等单位的区别!)