1. rem适配方案
- 目标:让一些不能等比例适配的元素达到当设备尺寸发生改变的时候,等比例适配当前的设备。
- 方法:使用媒体查询更具不同的设备安装比例设置html字体大小,然后页面元素使用rem做尺寸单位,当html字体变化的时候,元素尺寸也会发生变化,从而达到等比缩放的适配。
1.1 实际开发适配方案
- 按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小(手段:媒体查询)
- css中,设计稿元素的宽、高、相对位置等取值,按同等比例换算为rem为单位的值。
1.2 适配方案技术使用(主流)
- 技术方案1:less、媒体查询、rem
- 技术方案2(推荐):flexible.js、rem
上述两种方案都存在,方案2更简单,现阶段无需了解里面的js代码。
2. 适配方案1:rem+媒体查询+less技术
2.1 设计稿常见尺寸宽度
一般情况下,我们以一套或者两套效果图适应大部分屏幕,放弃极端屏或者对其优雅降级,牺牲一些效果,现状基本以750px为准。
2.2 动态设置html标签font-size大小
- 假设设计稿是750px
- 假设我们把屏幕划分为15等分(划分标准不一,可以是10等分也可以是20等分)
- 每一份作为html字体大小,这里是50px
- 那么在320px设备的时候,字体大小为320/15,也就是21.33px,到这里就已经实现了不同屏幕的文字大小不一样。
- 我们用页面元素的大小除以不同的html字体大小,就会发现它们的比例还是相同的
验证:
@media screen and (min-width: 320px) {
html {
/* 在320像素的屏幕下 */
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
/* 在750像素的屏幕下 */
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1.首先选一套标准尺寸750为准 */
/* 2. 用屏幕尺寸 除以 我们划分的份数 得到html里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值=页面元
2.3元素大小取值方法
公式:
页面元素的rem值=页面元素px值(屏幕px宽度/划分份数)
屏幕宽度/划分份数=html的font-size的大小
或者:页面元素的rem值=页面元素值px/html的font-size的大小