rem 适配布局

思考:
- 页面布局文字能否随着屏幕大小变化而变化？
- 流式布局和 flex 布局主要针对于宽度布局，那高度如何设置？
- 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

rem 单位

rem (root em)是一个相对单位，类似于 em，em 是父元素字体大小。
不同的是 rem 的基准是相对于 html 元素的字体大小。
- 比如，根元素（ html ）设置 font-size=12px; 非根元素设置 width:2rem; 则换成 px 表示就是 24px。
rem 的优势：父元素文字大小可能不一致，但是整个页面只有一个 html ，可以很好来控制整个页面的元素大小

/* 根html 为 12px */
html {
  font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
  font-size: 2rem;
}

什么是媒体查询

媒体查询（Media Query）是 CSS3 新语法。
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android 手机，平板等设备都用得到多媒体查询

媒体查询语法规范

1
2
3

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

用 @media 开头注意 @ 符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

关键字

关键字: 将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and：可以将多个媒体特性连接到一起，相当于“且”的意思。
- not：排除某个媒体类型，相当于“非”的意思，可以省略。
- only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

媒体查询案例

页面效果

实现思路
- 01 按照从大到小的或者从小到大的思路
- 02 注意我们有最大值 max-width 和最小值 min-width 都是包含等于的
- 03 当屏幕小于 540 像素，背景颜色变为蓝色（x <= 539）
- 04 当屏幕大于等于 540 像素并且小于等于 969 像素的时候背景颜色为绿色 ( 540=<x <= 969）
- 05 当屏幕大于等于 970 像素的时候，背景颜色为红色（ x >= 970）
- 注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

媒体查询与 rem

rem 单位是跟着 html 来走的，有了 rem 页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

资源的分别引入

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets（样式表）。
原理，就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件。

1	<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)" />

rem 适配方案

01 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
02 使用媒体查询根据不同设备按比例设置 html 的字体大小，然后页面元素使用 rem 做尺寸单位，当 html 字体大小变化,元素尺寸也会发生变化，从而达到等比缩放的适配。

rem 实际开发适配方案

01 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
02 CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

rem 适配方案技术使用

技术方案 1
- less
- 媒体查询
- rem
技术方案 2（推荐）
- flexible.js
- rem
总结：
- 01 两种方案现在都存在。
- 02 方案 2 更简单，现阶段大家无需了解里面的 js 代码。

rem 实际开发适配方案 1

rem + 媒体查询 + less 技术
1. 设计稿常见尺寸宽度

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以 750 为准。
1. 动态设置 html 标签 font-size 大小
- 01 假设设计稿是 750px
- 02 假设我们把整个屏幕划分为 15 等份（划分标准不一,可以是 20 份,也可以是 10 等份）
- 03 每一份作为 html 字体大小，这里就是 50px
- 04 那么在 320px 设备的时候，字体大小为 320/15 就是 21.33px
- 05 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
- 06 比如我们以 750 为标准设计稿
- 07 一个 100*100 像素的页面元素在 750 屏幕下，就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是 1 比 1
- 08 320 屏幕下，html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1 比 1
- 09 但是已经能实现不同屏幕下,页面元素盒子等比例缩放的效果
1. 元素大小取值方法
- 01 最后的公式：页面元素的 rem 值 = 页面元素值（ px ） / （屏幕宽度 / 划分的份数）
- 02 屏幕宽度 / 划分的份数就是 html font-size 的大小
- 03 或者：页面元素的 rem 值 = 页面元素值（px） / html font-size 字体大小

// 尚硅谷: 方案一

function adapter() {
  // 获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
  const dpWidth = document.documentElement.clientWidth
  // 计算根字体大小
  const rootFontSize = (dpWidth * 100) / 375
  // 设置根字体大小
  document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter

// 尚硅谷: 方案二

function adapter() {
  // 获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
  const dpWidth = document.documentElement.clientWidth
  // 计算根字体大小
  const rootFontSize = dpWidth / 10
  // 设置根字体大小
  document.documentElement.style.fontSize = rootFontSize + 'px'
}
adapter()
window.onresize = adapter

案例-苏宁网移动端首页

01 效果图展示

02 技术选型
- 方案：我们采取单独制作移动页面方案
- 技术：布局采取 rem 适配布局（ less + rem + 媒体查询）
- 设计图：本设计图采用 750px 设计尺寸
03 设置视口标签以及引入初始化样式

<meta
  name="viewport"
  content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link rel="stylesheet" href="css/normalize.css" />

04 设置公共 common.less 文件
- 01 新建 common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的 html 字体大小，因为除了首页其他页面也需要
- 02 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
- 03 划分的份数我们定为 15 等份
- 04 因为我们 pc 端也可以打开我们苏宁移动端首页，我们默认 html 字体大小为 50px，注意这句话写到最上面
05 新建 index.less 文件
- 01 新建 index.less 这里面写首页的样式
- 02 将刚才设置好的 common.less 引入到 index.less 里面语法：**@import “common”**
- 03 生成 index.css 引入到 index.html 里面
06 body 样式

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #f2f2f2;
}

rem 实际开发适配方案 2

简洁高效的 rem 适配方案 flexible.js
- 手机淘宝团队出的简洁高效移动端适配库
- 我们再也不需要在写不同屏幕的媒体查询，因为里面 js 做了处理
- 它的原理是把当前设备划分为 10 等份，但是不同设备下，比例还是一致的。
- 我们要做的，就是确定好我们当前设备的 html 文字大小就可以了
- 比如当前设计稿是 750px ，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
- 里面页面元素 rem 值：页面元素的 px 值 / 75
- 剩余的，让 flexible.js 来去算
- github 地址：https://github.com/amfe/lib-flexible

案例-苏宁移动端首页

01 技术选型
- 方案：我们采取单独制作移动页面方案
- 技术：布局采取 rem 适配布局 2（ flexible.js + rem）
- 设计图：本设计图采用 750px 设计尺寸
02 设置视口标签以及引入初始化样式还有 js 文件

<meta
  name="viewport"
  content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/index.css" />

我们页面需要引入这个 js 文件，在 index.html 中引入 flexible.js 这个文件

1	<script src=“js/flexible.js”> </script>

03 body 样式

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #f2f2f2;
}