# rem 适配布局
# rem 基础
rem (root em) 是一个相对单位，类似于 em, em 是父元素字体大小
不同的是 rem 的基准是相对于 html 元素的字体大小
比如，根元素 (html) 设置 font-size=12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px
# 媒体查询
媒体查询 (Media Query) 是 CSS3 新语法
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对苹果手机，Android 手机，平板等设备都用得到多媒体查询
语法 :
1 | @media mediatype and|not|only (media feature) { |
- 用 @media 开头，注意 @符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
# mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
# 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格.
常见媒体特性 :
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
# 引入资源 (理解)
当样式比较繁多时，我们可以针对不同的媒体使用不同的 stylesheets (样式表). 原理，就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件
语法 :
1 | <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> |
# rem 实际开发适配方案
- 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 fnt-size 大小；(媒体查询)
- CSS 中，设计稿元素的宽，高，相对位置等取值，按照同等比例换算为 rem 为单位的值
技术方案 1
- less
- 媒体查询
- rem
技术方案 2
- flexible.js
- rem
# 技术方案 1
# 动态设置 html 标签 font-size 大小
- 假设设计稿是 750px
- 假设我们把整个屏幕划分为 15 等份 (划分标准不一，可以是 20 等分也可以是 10 等份)
- 每一份作为 html 字体大小，这里就是 50px
- 在 320px 设备的时候，字体的大小为 320/15 就是 21.33px
- 用页面元素除以大小 除以不同的 html 字体大小就会发现比例还是相同的
- 比如我们以 750 为标准设计稿
- 一个 100*100 像素的页面元素在 750 屏幕下，就是 100/50 转换为 rem 是 2rem * 2rem 比例是 1 比 1
- 320 屏幕下，html 字体大小为 21.33 则 2rem = 42.66 此时宽和高都是 42.66, 比例为 1 比 1
- 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
# 设置公共 common.less 文件
- 新建 common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的 html 字体大小，因为除了首页其他页面也需要
- 我们关心的尺寸 320px, 360px, 375px, 384px, 400px, 414px, 424px, 480px, 540px, 720px, 750px
- 划分的份数定位 15 份
- 因为 PC 端也可以打开苏宁移动端首页，默认 html 字体大小为 50px
# 技术方案 2
手机淘宝团队出的简洁高效，移动端施佩库
我们再也不需要再写不同屏幕的媒体查询，因为里面 js 做了处理
它的原理是把当前设备划分为 10 等份，但是不同设备下，比例还是一致的
我们要做的，就是确定好我们当前设备的 html 文字大小就好了
比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px (750px / 10) 即可
里面页面元素 rem 值：页面元素的 px 值 / 75
剩余的，让 flexible.js 计算
