css长度单位
css 长度单位一般我们分为绝对长度单位和相对长度单位
绝对长度单位
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。那么，常见的绝对长度单位有哪些呢？
-
in，英寸 -
cm，厘米 -
mm，毫米 -
pt，points -
pc，Picas
这些单位都是拥有真实的物理尺寸的以及确定的换算关系，比如，1in = 2.54cm。我们平时在书写css代码时，当然也可以直接使用这些单位，并且也能够在屏幕上表现。不过由于这些单位都是绝对长度单位，往往不利于页面屏幕的渲染，这些绝对长度单位更多的使用场景往往是被用在印刷、打印等方向。
相对长度单位
CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。下面是常用的一些相对长度单位:
-
px，Pixels像素 -
em，元素的字体高度 -
ex，x-height，字母x的高度 -
%，百分比 -
ch，字符0的宽度 -
rem，根元素（html）的font-size -
vw，viewpoint width，视窗宽度，1vw=视窗宽度的1% -
vh，viewpoint height，视窗高度，1vh=视窗高度的1% -
vmin，vmax等
今天我们了解几个我们比较常用而且不容易记得几个css的单位:
pxemremvwvhvminvmax
px
px像素单位其实是和设备屏幕的分辨率是直接相关的。
在web开发中，像素现在仍然是典型（主流的）度量单位。当然，你可以在web开发的过程中采用其他的单位，但是往往这些单位在渲染时都被映射换算成像素。是我们最常使用的单位:
header{
width: 100px;
height: 100px;
border: 1px solid #fff;
}
em
em的含义最初是指基于当前字体大写字母”M”的尺寸。所以当改变font-size的大小时，这个长度单位将会发生变化。
现代所有的浏览器中，都会有这样的一个默认值，即1em = 16px，所以即使你忘记了设置font-size也不要紧。
对于em我们需要注意:
基于当前元素的(如果没设置就是继承其父元素的)font-size
<div style="font-size: 12px;">
<span style="font-size: 2em">em单位</span>
</div>
如上代码中，span标签中设置了font-size: 2em，因为其父标签设置了font-size: 12px，所以span标签的结果就是font-size: 24px。
rem
rem单位是相对于字体大小的html元素，也称为根元素。
1rem = 根元素(html 节点)字体大小的倍数。根元素（html）的 font-size:16px
html {
font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
注意 中文版的 Chrome 不支持把font-size 设置到到 12px 以下，因此可以考虑给根元素设置 font-size: 125%。
rem与em的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
em最多取到小数点的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
在上面的代码中，我们将根元素（html）的字体大小font-size设为20px，
body的字体大小设为1rem，那么转换为像素就是28px（20 × 1.4），
接着我们又将div的padding设为1em，由于其基于父元素，所以转换为像素是28px ( 28 × 1），
然后我们又将span的字体大小设为1rem，也就是20px，由于其自身设置了字体大小，所以padding设为1em，转换为像素是20px(20 × 1），而不是乘以其父元素的字体大小28px(28 × 1）。
注意：当元素自身设置了字体大小，那么如果它的其他css属性也使用em单位，则会基于它自身的字体大小。（就像上面例子的span的padding一样）
基于上面这些原因，个人更倾向于使用rem，因为em使用不当的话，当出现多层继承时，会很容易混淆，比如：
<style>
html{ font-size: 20px; }
body{
font-size: 0.9em; /* 18px */
}
div{
font-size: 0.8em; /* 14.4px */
}
span{
font-size: 0.9em; /* 12.96px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
使用em时，如果其祖先元素都是用了em，那么就会像上面一样，body继
承其父元素html的字体大小，而div又继承其父元素body的字体大小
，而span又继承其父元素div的字体大小，
最终span的字体大小最终是12.96px（20 × 0.9 ×0.8 × 0.9）。
vw、 vh
vw viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh viewpoint height，视窗高度，1vh=视窗高度的1%
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
做一个占满高度的或者接近占满高度的幻灯片，可以用一个非常简单的方法实现，只要用一行CSS：
.cover{
width: 100vw;
height: 100vh;
}
vmin、vmax
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
如果浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px。
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。当然了,最好根据实际应用来使用相应的字体单位
网友评论