CSS长度单位：vh、vw、vmin、vmax、em、rem、ex、ch、px

来源：互联网发布：卧蚕阿姨的淘宝店编辑：程序博客网时间：2024/05/22 05:04

CSS的长度单位。

一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

1、vh、vw

有点像width和height属性，v（viewpoint）也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;height:100vh;

width:100%;height:100%;

以上两种表达有什么区别呢。如果浏览器高度为1000px，宽度为800px，那么1vh=1000/100=10px，1vw=800/100=8px；而%要受到父元素的约束，并不能直接根据浏览器的尺寸计算。

2、vmin、vmax

vmin表示当前宽和高的小者，vmax则表示当前宽和高的大者。

3、em、rem

em同样是个相对大小的单位，下面是css3参考手册中的解释

相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

来自梦柯网的例子body {    font-size: 14px;}div {    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}<body>    <div>        Test <!-- 14 * 1.2 = 16.8px -->        <div>            Test <!-- 16.8 * 1.2 = 20.16px -->            <div>                Test <!-- 20.16 * 1.2 = 24.192px -->            </div>        </div>    </div></body>

也就是说这样设置的话，每层都要看它的父元素，而这并不总是我们想要的，rem可以来补充em不足。

r（root）通常指<html>标签，也就是只要用rem作为单位，都会以<html>标签的设置为基础。

4、ex

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

5、ch，是CSS3新增单位，有少部分浏览器不支持，如Android browser

数字“0”的宽度

6、px

相对长度单位。像素（Pixels）。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

7、q

1/4毫米（quarter-millimeters）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

8、in

英寸（Inches）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

9、pt

点（Points）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

10、pc

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

11、cm/mm

厘米/毫米

0 0