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适配方案
- 让一些不能等比自适应的元素 达到当设备尺寸发生改变的时候 等比例适配当前设备
- 使用媒体查询根据不同设备比例设置html的字体大小
然后页面元素使用rem做尺寸单位 当html字体大小变化 元素也会发生变化 达到等比缩放的适配 - 根据设计稿取值等比换算 一般以750为准
rem适配方案的两种方式
- less + 媒体查询 + rem
- flexble.js + rem
一 less + 媒体查询 + rem
动态设置html标签font-size大小
- 假设设计稿 750 px
- 假设把屏幕划分为15等份(划分标准不一定 可以是20 也可以是10)
- 每一份作为html字体大小 这里就是50px
- 那么在320px设备的时候 字体大小为320/15 就是21.33px
- 用页面元素的大小除以不同的html字体大小 会发现它们的比例还是相同的
- 比如一个 100100 像素元素在750屏幕下 就是100/50 转换为rem 是2rem2rem 比例是 1比1
- 320屏幕下 html字体大小为21.33 则2rem=42.66px 此时宽和高都是42.66 但比例还是1比1
元素大小取值方法
- 最后的公式:页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
- 屏幕宽度/划分的份数 就是html font-size的大小
- 或者:页面元素的值 = 页面元素值(px)/html font-size字体大小
二 flexble.js + rem
原理是把当前设备划分为10等份 不同的设备 比例还是一致的
- 比如当前是750px
- 设置html文字大小为75px(750px/10)就可以
- 页面元素rem值:页面元素的px值/75
- 剩余的 让flexble.js来计算
简单来说 不需要写媒体查询了。