响应式布局rem学习笔记

一、基础认知

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

放弃px单位，使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的大小，实现等比例缩放font-size

二、使用案例

	<style>
			/*100vm  375px*/
			/*100vm  414px*/
			html{
				font-size: 26.7vm;
			}
			div{
				font-size: 0.16rem;
			}
		</style>

 

通过vm，将总体像素切分为100份，em相对与html根元素进行改变；

从而，当切分的像素不同时，em的大小也不同，从而达到 响应式布局