| title | date | tags | categories |
|---|---|---|---|
CSS中的几种长度单位小记 |
2017-12-21 02:59:19 -0800 |
Css |
Css |
在自己写项目中，CSS的长度使用最多的还是px，也就是像素，但是对于其他的长度单位却了解的很模糊，所以我们打开MDN，翻阅菜鸟教程，来做个小记😆
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
px就是像素（pixel）的意思，由于是绝对长度单位，其实很简单，就是一个像素点显示的长度。但是由于屏幕的尺寸和分辨率的不同，1像素所表现的长度可能不尽相同。
pt是磅（point，和质量单位无关），是印刷设计中文字大小的单位point的音译，中文正确翻译为“点”，缩写为pt。，72磅等于一英寸，也就是1pt = (1 / 72)in。除此之外，其他换算还有1in = 96px，3pt = 4px，25.4mm = 96px等。
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
em（emphasize）单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。但是有时候为了简化换算，我们会更改浏览器的默认字体大小，比如将其改为10px，这样我们1em就是10px了。
<body>
<div class="dad">
<div class="son"></div>
</div>
</body>body{
font-size:62.5%;
}
div{
font-size:1em;
/* 这个时候dad的尺寸为10px，但是son的尺寸却是20px，因为相对的是父元素 */
}rem其实和em很相似，但是区别就在于，rem是相对与根元素html的font-size来说的，所以rem仅需要调整根字体就好了。
body{
font-size:62.5%;
}
div{
font-size:1em;
/* 这个时候dad和son的尺寸均为10px，因为相对的是根元素 */
}资料参考自菜鸟教程