rem适配方案

rem
rem是一个相对单位 类似于em
em是相对父元素的字体大小来说的
rem的基准是相对于html元素的字体大小

rem的优点:
就是可以通过修改html里面的字体大小来改变页面中元素的大小 整体控制

media
媒体查询 针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature){}
// mediatype: 
all // 全部
print // 打印机
screen // 屏幕

and // 将多个媒体特性连接到一起 相当于 且 的意思
not // 排除某个媒体类型 相当于 非 的意思
only // 指定某个特定的媒体类型

// 媒体特性 media feature
width // 定义输出设备中页面可见区域的宽度
min-width // 定义输出设备中最小可见区域宽度
max-width // 定义输出设备中页面最大可见区域宽度
min和max都是包含等于的。

@media screen and (max-width:800px){} // 屏幕上 并且 最大宽度:800 小于等于800
@media screen and (min-width:600px){} // 大于等于 800
@media screen and (min-width:540px) and (max-width:970px){} // 大于等于540 小于等于970

媒体查询一般按照从大到小 或者 从小到大的顺序来
如果按照从小到大 代码会更简洁
后面的一档会覆盖前面一档中冲突的部分

/* 媒体查询+rem实现元素动态大小变化 */
@media screen and (min-width:320px){
	html{font-size:50px;}
}
@media screen and (min-width:640px){
	html{font-size:100px;}
}

引入资源 针对不同的屏幕尺寸调用不同的样式资源
语法:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

rem适配方案

1. 让一些不能等比自适应的元素 达到当设备尺寸发生改变的时候 等比例适配当前设备
2. 使用媒体查询根据不同设备比例设置html的字体大小
   然后页面元素使用rem做尺寸单位 当html字体大小变化 元素也会发生变化 达到等比缩放的适配
3. 根据设计稿取值等比换算 一般以750为准

rem适配方案的两种方式

1. less + 媒体查询 + rem
2. flexble.js + rem

一 less + 媒体查询 + rem

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

1. 假设设计稿 750 px
2. 假设把屏幕划分为15等份(划分标准不一定 可以是20 也可以是10)
3. 每一份作为html字体大小 这里就是50px
4. 那么在320px设备的时候 字体大小为320/15 就是21.33px
5. 用页面元素的大小除以不同的html字体大小 会发现它们的比例还是相同的
6. 比如一个 100100 像素元素在750屏幕下 就是100/50 转换为rem 是2rem2rem 比例是 1比1
7. 320屏幕下 html字体大小为21.33 则2rem=42.66px 此时宽和高都是42.66 但比例还是1比1

元素大小取值方法

1. 最后的公式:页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
2. 屏幕宽度/划分的份数 就是html font-size的大小
3. 或者:页面元素的值 = 页面元素值(px)/html font-size字体大小

二 flexble.js + rem

原理是把当前设备划分为10等份 不同的设备 比例还是一致的

1. 比如当前是750px
2. 设置html文字大小为75px(750px/10)就可以
3. 页面元素rem值:页面元素的px值/75
4. 剩余的 让flexble.js来计算

简单来说 不需要写媒体查询了。