rem布局适配多个屏幕

原理:根据屏幕的大小，动态的改变html标签的font-size的大小
页面是等比例缩放:
设计图的屏幕宽度/给设计图设置的font-size = 你需要适配的屏幕宽度/你需要适配屏幕的fong-size

   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191021110812120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F5cGluZ2k=,size_16,color_FFFFFF,t_70)

/*750 720 540 480 424 414 400 384 375 360 320 */

/* 第一步先适配750的屏幕 /
先适配设计图的屏幕大小（比如：750px），并且根据设计图屏幕大小定义一个html标签的font-size的大小（比如：50px），此时屏幕大小与font-size的比例为15
/ 定义设计图屏幕大小html的font-size值为50px(可以随意定,我这里就以50为例) /
/ 比例为15(750/50) */

/* 设置媒体查询样式生效的最小宽为750px——》只有当屏幕宽度大于等于600px时，样式才会生效！！/
@media screen and (min-width:750px) {
html {
font-size: 50px;
}
}
/ 用less函数封装 */

.adapter(@width) {
@media screen and (min-width:@width) {
html {
/* round(数值)：让这个数值四舍五入 /
/ round(数值，保留几位小数) */
font-size: round(@width/15,2);
}
}
}

.adapter(320px);
.adapter(360px);
.adapter(480px);
.adapter(540px);
.adapter(720px);
.adapter(750px);
/* 这样就适配完成了 */