移动web实现响应式布局（rem）

rem单位：

rem（root em）是一个相对单位，类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。

比如：根元素（html）设置font-size = 12px；非根元素设置width：2rem;则换算成px表示24px。

媒体查询

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器的大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多的苹果手机，安卓手机，平板灯设备都用得到多媒体查询

语法如下图：

媒体查询类型

将不同的终端设备划分成不同的类型，称为媒体查询

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

语法规范

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and:可以将多个媒体特性连接到一起作为媒体查询的条件
not ：排除某个媒体类型，相当于非的意思，可以省略
only：指定某个特定的媒体类型，可以省略

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是推荐使用从小到大，这样代码可以更简洁

引入资源

当样式比较繁多的时候，可以针对不同的媒体使用不同样式表
原来就是直接在link中判断设备的尺寸，然后引入不同的css文件
建议：从小到大进行引入

动态设置html标签font-size大小

1. 假设设计稿是750px;
2. 假设我们把整个屏幕划分成15等份（划分标准不一样可以是20份也可以是10份）；
3. 每一份作为html字体大小，这里就是50px （750/15）；
4. 那么在320px设备的时候，字体大小为320/15就是21.33px;
5. 用我们页面元素的大小除以不同的html字体大小会发现他们的比例还是相同的；
6. 比如我们以750px为标准设计稿；
7. 一个100100像素的页面在750屏幕下，就是100 / 50转换成rem是2rem2rem比例是1：1；
8. 320屏幕下，html字体大小为21.33,则2rem = 42.66px，此时宽高都是42.66，但是宽高比例还是1:1；
9. 因此在不同屏幕下，页面元素盒子就能实现等比缩放了；

✨✨✨总结：页面元素rem计算公式： (页面元素的px / html字体的大小)✨✨✨

💛💛💛 common.less 以下是几种常见的设备屏幕宽度💛💛💛

	//以750设计稿举例子
	
	html{
		font-size: 50px;
	    min-width:280px;
	    max-width: 750px;
	    margin: 0 auto;
	}
	
	//把页面划分成15等份
	@count:15;
	
	//除法运算需加括号
	@media screen and (min-width:280px) {
	    html{
	        font-size: (280px / @count);
	    }
	}
	@media screen and (min-width:320px) {
	    html{
	        font-size: (320px / @count);
	    }
	}
	@media screen and (min-width:360px) {
	    html{
	        font-size: (360px / @count);
	    }
	}
	@media screen and (min-width:375px) {
	    html{
	        font-size: (375px / @count);
	    }
	}
	@media screen and (min-width:384px) {
	    html{
	        font-size: (384px / @count);
	    }
	}
	@media screen and (min-width:400px) {
	    html{
	        font-size: (400px / @count);
	    }
	}
	@media screen and (min-width:414px) {
	    html{
	        font-size: (414px / @count);
	    }
	}
	@media screen and (min-width:424px) {
	    html{
	        font-size: (424px / @count);
	    }
	}
	@media screen and (min-width:480px) {
	    html{
	        font-size: (480px / @count);
	    }
	}
	@media screen and (min-width:540px) {
	    html{
	        font-size: (540px / @count);
	    }
	}
	@media screen and (min-width:720px) {
	    html{
	        font-size: (720px / @count);
	    }
	}
	@media screen and (min-width:750px) {
	    html{
	        font-size: (750px / @count);
	    }
	}

💛💛💛 home.less 💛💛💛

@import "./common.css";

// 页面元素rem计算公式 : (页面元素的px / html字体大小)

@baseFont:50;  //默认字体大小是50 (pc端默然为50px，页面最大宽度为750px)
.wrap-item {
    font-size: 1.25rem;
    height: (100rem / @baseFont);
    background: pink;
    text-align: center;
    color: #ffffff;
}

demo如下：