常用单位

1、px：绝对单位，页面按精确像素展示

2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。

3、rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算。

4、vw、vh、vmin、vmax （窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。）

  • vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh：视窗高度的百分比
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

5、%：相对于父元素的大小设定的比率

效果演示

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
	<p>container</p>
	<div class="wrap">
		<p>wrap</p>
		<div class="parent">
			<p>parent</p>
			<div class="child">
				<p>child</p>
			</div>
		</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<style>
	.container{ width:100%; background:#cdcdcd; overflow:auto;}
	.wrap *{ margin:0 0 .8rem; padding:0;}
	.wrap,.parent,.child{
		width:100%;
		padding:1rem;
		box-sizing:border-box;
	}
	.wrap{ margin-bottom:0; font-size:15px; background:lemonchiffon;}
	.parent{ font-size:12px; background:palegreen}
	.child{ font-size:18px; background:navajowhite}
</style>

container

wrap

parent

child

  • 单位选择

    pxemremvminvmax

  • 宽度调整

    0
    0
    0