css尺寸单位

来源：互联网发布：网络pos支付平台编辑：程序博客网时间：2024/04/28 02:42

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尺寸单位

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

<style>/* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */html{font-size: 2rem;}/* 2*32=64px */.box{font-size: 2rem;}.in{    /* 1*32=32px */    font-size: 1rem;    /* 1*32=32px */    border-left: 1rem solid black;    /* 4*32=128px */    height: 4rem;    /* 6*32=192px */    width: 6rem;    background-color: lightblue;}</style>

默认值，浏览器的字体大小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

阅读全文

0 0