rem适配布局(六)
学习目标
(1)能够使用rem单位
(2)能够使用媒体查询的基本语法
(3)能够使用Less的基本语法
(4)能够使用Less中的嵌套
(5)能够使用Less中的运算
(6)能够使用2种rem适配方案
(7)能够独立完成苏宁移动端首页
1.rem适配方案
(1)提出问题
我们使用rem适配的目标是什么?怎么去实现它?
① 让一些不能等比的自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
② 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配
(2)rem实际开发适配方案
① 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size大小;(媒体查询)
② CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值
(3)rem 适配方案技术使用(市场主流)
技术方案1 ● Less ● 媒体查询 ● rem
技术方案2 (推荐)● flexible.js ● rem
2.rem 实际开发适配方案1
(1)使用技术
rem + 媒体查询 + less 技术
(2)设计稿常见尺寸宽度
设备 | 常见宽度 |
---|---|
iphone 4 5 | 640px |
iphone 6 7 8 | 750px |
Android | 大部分4.7-5寸的安卓设备为720px |
一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果,现在基本以750为标准
(3)动态设置 html 标签 font-size 大小
比如我们的设计稿是750px,把整个屏幕划分成15等份,每一份作为html字体大小,所以为 50px
在320px的设备的时候,同理,字体大小为 21.33px
以750为标准设计稿,一个100*100像素的页面在750屏幕下,转换为rem是2rem*2rem,比例也就是1:1
在320屏幕下,html 字体大小为21.33 则 2rem = 42.66px 宽高比例仍然是1:1
所以我们已经能实现在不同屏幕下页面元素盒子等比例缩放的效果
例子<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title></title>
<style>
@media screen and (min-width: 320px) {
html{
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html{
font-size: 50px;
}
}
div{
width: 2rem;
height: 2rem;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
大于750屏幕
320屏幕
(4)元素大小取值方法
① 页面元素的rem值 = 页面元素值(px)/(屏幕宽度 / 划分的份数)
② 屏幕宽度 / 划分的份数 就是html font-size 的大小