您的位置：首页 > Web前端 > CSS

css尺寸单位

2017-11-06 14:13 288 查看

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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航