CSS中的长度单位

Posted 2021-11-11 橘猫吃不胖～

CSS中的长度单位

• 1.1 CSS中的长度单位
• 1.2 vw、vh和%的区别
• 1.3 vmin、vmax的用处

1.1 CSS中的长度单位

单位	含义	注意
in	英寸
cm	厘米
mm	毫米
px	像素点，相对长度单位	相对于计算机屏幕分辨率
em	相对长度单位	相对于当前对象内文本的字体尺寸，任意浏览器默认的相对字体高度为16em，12px = 0.75em，10px = 0.625em
pt	磅	1pt = 1/72in
vw	视窗宽度的百分比	1vm = 视窗宽度的1%，是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
vh	视窗高度的百分比	是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
vmin	表示vm、vh中的较小的一个值	是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%
vmax	表示vm、vh中的较大的一个值	是视窗(Viewport)单位，是相对单位，由视窗大小决定.1个单位类似于1%

1.2 vw、vh和%的区别

1、%是相对于父元素的大小而设定的比例，vw、wh是由视窗的大小来决定
2、vw、vh可以直接获取视窗的宽度或高度，%在设置时要根据body的高度的情况，往往无法正确的获取实际宽度或高度

1.3 vmin、vmax的用处

1、在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样
2、由于vmin、vmain是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样