css尺寸单位

红太狼 2022-06-06 10:07 308阅读 0赞

**css尺寸单位有如下：**  
像素px（pixls）:在web上，像素px是经典的度量单位，很多其他长度直接映射像素处理。  
% ：百分比  
in ：英寸 1in = 2.54cm = 96px  
cm：厘米 1cm = 10mm = 96px/2.54 = 37.8px  
mm：毫米 1mm = 0.1cm = 3.78px  
0.25毫米q：1q = 0.25mm = 0.945px  
em : 当前字体的尺寸，比如某元素以12pt显示，那么2em是24pt。在css中，em是非常有用的单位，因为它可以自动适应用户所使用的字体。  
ex：一个ex是一个字体的x-height。（x-height通常是字体尺寸的一半）  
点pt：磅（1pt等于1/72英寸）  
派卡pc：12pt

**em用法例子**  
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size;若用于其他属性，相对于本身元素的font-size。

<html>
    <head>
      <title>长度单位</title>
      <style type="text/css"> .father{ font-size:20px;} .son{ /*相对于父元素，为20*2px = 40px*/ font-size:2em; /*如果在加一个类似height或者width的限定则根据本身的font-size为基本单位*/ background-color: lightblue; } </style>
    </head>
    <body>
      <div class="father">
      父元素字体大小
      <div class="son">子元素字体大小</div>
      </div>
    </body>
    </html>

![css尺寸单位][css]

**rem**  
rem是相对于根元素html的font-size属性的计算值。用法和em一致（浏览器默认字体大小为16px）  
兼容性：IE8-不支持

默认值，浏览器的字体大小font-size是16px，也就是1rem=16px。chrome下最小的字体大小为 12px。

**视口相关相对长度单位**  
视口相关的长度值相对于初始包含快的大小。当初始包含快的高度变化时，他们会相应地缩放。当根元素的overflow值为auto时，任何滚动条会假定不存在。  
相关单位有：vh、vw、vmin、vmax  
兼容性：IE8-不支持、IOS7.1-不支持、android4.3-不支持。所有IE不支持vmax。

vh  
布局视口高度的1/100

vw  
布局视口宽度的1/100

vmin  
布局视口高度和宽度之间最小值的1/100  
vmax  
布局视口高度和宽度之间最大值的1/100

[css]: /images/20220606/c0ed3d2a665e40bfba5691e82bef936f.png