rem和media适配

1.media scss rem自适应适配：
1.1：定义：根据不同屏幕尺寸动态改变页面样式;rem实质上是一个相对单位，我们做的时候只需根据设计稿做媒体查询，规定不同屏幕范围html字体大小，在实际元素尺寸上用实际尺寸/设计稿对应尺寸的html字体大小，得到相对大小，浏览器会*html字体大小得到实际尺寸；
例如：750px设计稿，划分15等分就是50px html字体大小就是750/15=50px,div宽度100px就是100rem/50=2rem,750就是15rem,div的宽度在任何尺寸下只占15份中的两份，所以在任何设定的屏幕尺寸下都能合理的展示
1.2：形式：@media all(所有媒体类型)/print(打印机)/screen(屏幕尺寸) and/not/only (width/min-width/max-width){}
1.3：在html文件直接引入外部样式：

2.rem flexible.js避免写太多媒体查询定义尺寸 插件规定把页面10等分，我们定义Html字体大小为设计稿宽度/10（实际上定义这个只是为了算出下面个元素所占屏幕宽度的比例），在div直接实际尺寸/html文字大小rem，其他的flexible.js自动完成，不需media一个个定义;修改build配置和源码最大54px写的限制；cssrem插件实现自动将px转化rem，在vscode设置修改html字体大小;easycss插件自动转化scss为css

1.rem相对于html字体大小，em相对于父元素字体大小，rem优点是通过改变根元素字体大小改变页面各元素尺寸
2.rem适配方案：
2.1：rem+媒体查询+less技术
例如设计稿750像素，要求页面15等分去设置字体大小，html字体大小就是750/15=50px,元素100px就可以写出100/50=2rem;
在320像素屏幕下15等份就是320/15=21.3px,100px就是100/21.33rem