2021-06-17 使用vm和rem进行响应式布局的思路

目的:

1.实现响应式布局:页面布局随着浏览器缩放而缩放
2:让1rem=100px以方便地修改成相对单位

步骤:

(以750px的移动端屏幕为例)
1.演算:让100vm=750px,即100%浏览器宽度视距
再令1rem=100px,由此可以得到以下等式关系:
1rem=13.33vm;
2.设置html的font-size

html{
	font-size:13.33vm;
}

3.把所有的px都改成rem
如:

p{
	width:250px;
	height:40px;
}

改成:

p{
	width:2.5rem;
	height:.4rem;
	/*可见1rem=100px的目的是方便做相对单位的切换*/
}