相对单位:
(一般用于对屏幕分辨率兼容较高的项目,可以使用不同设备的大小)单位 | 描述 |
---|---|
em | ems始终相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px; |
ex | 依赖于英文字母小 x 的高度 |
ch | 数字 0 的宽度 |
rem | rem始终相对的是 : 根元素(html)的 font-size |
vw | 全称:viewpoint width, 相对于浏览器窗口的宽度,1vw=视窗宽度的1%; 比如浏览器窗口是 1920 * 970; 1vw=19.2 |
vh | 全称:viewpoint height,相对于浏览器窗口的高度,1vh=视窗高度的1% 比如浏览器窗口是 1920 * 970; 1vh=9.7 |
vmin | vw和vh中较小的那个。 |
vmax | vw和vh中较大的那个。 |
% | 相对于父元素的百分比 |
关于 rem , 有时候可以在页面顶部写个JS 来设定一个比较好计算的值,比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
//1rem = 浏览器宽度的十分之一
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/10+"px";
</script>
<style>
*{margin: 0;padding: 0;}
/*width:5rem = 浏览器宽度的50% */
div{float: left;width:5rem;height: 1rem;}
</style>
</head>
<body>
<div style="background: #50E33E"></div>
<div style="background: #437EBF"></div>
</body>
</html>
效果图:
绝对单位:
(一般用于对固定设备或软件的项目,不会受显示器,分辨率等的影响)单位 | 描述 |
---|---|
cm | 厘米 |
mm | 毫米 |
in | 英寸 (1in = 96px = 2.54cm) |
px * | 像素 (1px = 1/96th of 1in) 、计算机屏幕上的一个点 |
pt | 磅 ,point,大约1/72英寸; (1pt = 1/72in) |
pc | pica,大约6pt,1/6英寸;12 点活字 (1 pc 等于 12 点), (1pc = 12 pt) |
浏览器支持:
长度单位 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |