rem 和 媒体查询

一、rem 是什么

rem（root em）是一个相对单位，类似于 em。

em 是父元素的字体大小，而 rem 的基准是相对于 html 元素的字体大小。

html {
  font-size: 20px;
}

father {
  font-size: 16px;
}

/* child 是 father 的子元素， 则 1em = 16px，此时 width 为 160px */
child {
  width: 10em;
}

/* rem 是相对于 html 元素的字体大小，则 1rem = 20px，此时 width 为 200px */
footer {
  width: 10rem;
}

二、什么是媒体查询

媒体查询（Media Query）是 CSS3 中的新语法，可以针对不同的媒体类型来定义不同的样式，比如 可以根据不同屏幕尺寸设置不同样式。

在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染。

/* 语法 */
@media mediatype and|not|noly (media feature) {
  具体 css 样式
}

1、mediatype 媒体类型

值	说明
all	用于所有设备
print	适用于在打印预览模式下在屏幕上查看的分页材料和文档。
screen	主要用于屏幕，我们最常用的
speech	主要用于语音合成器

2、关键字

• and：可以将多个媒体特性连接到一起，相当于“且”；
• not：排除某个媒体类型，相当于“非”，可以省略；
• only：指定某个特定的媒体查询，可以省略。

3、media feature 媒体特性

常用的有三个：width、min-width、max-width。

（1）当屏幕可视区域宽度小于 500px 时，body 背景色设置为红色。

/* 在屏幕上 且 宽度最大为 500px 时，设置 body 背景为红色 */
@media screen and (max-width: 500px) {
  body {
    background-color: red;    
  }
}

（2）当屏幕可视区域宽度大于 500px，小于1000px 时，body 背景色设置为绿色。

/* 在屏幕上 且 宽度最小为 501px，且 宽度最大为 999px 时，设置 body 背景为绿色 */
@media screen and (min-width: 501px) and (max-width: 999px) {
  body {
    background-color: green;    
  }
}

（3）当屏幕可视区域宽度大于1000px 时，body 背景色设置为紫色。

/* 在屏幕上 且 宽度最小为 1000px时，设置 body 背景为紫色 */
@media screen and (min-width: 1000px) {
  body {
    background-color: purple;    
  }
}

4、用媒体查询引入不同资源文件

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

三、媒体查询 + rem 实现元素动态大小变化

rem 单位时根据 html 中文字大小变化的，用媒体查询不同设备的宽度，设置不同设备 html 的 font-size，就可以实现页面元素大小的动态变化。

那 html 中的 font-size 设置为多大合适呢？

假设我们的设计稿是 750px 的，我们把屏幕划分为 15 等份（也可以是 10 或者 20），每一份的大小（即 50px）作为 html 的字体大小。

那么在 320px 的设备中，每一份的大小为 320 / 15 = 21.33px。

640px 的设备中，每一份的大小为 640 / 15 = 42.67px。

/* 屏幕宽度 320px ～ 640px */
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33px;    
  }
}

/* 屏幕宽度 640px ～ 750px */
@media screen and (min-width: 640px) {
  html {
    font-size: 42.67px;    
  }
}

/* 屏幕宽度 750px 以上 */
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;    
  }
}

如果此时设计稿中有个 div 的高度为 80px，则在 css 中，高度应该为 80 / 50 = 1.6rem。

也就是用设计稿中 元素的像素值/（设计稿尺寸/划分的份数）。

这样这个 div 在不同屏幕尺寸下的大小分别为：

• 屏幕宽度 320px ～ 640px ： 21.33 * 1.6 = 34.128px
• 屏幕宽度 640px ～ 750px ： 42.67 * 1.6 = 68.272px
• 屏幕宽度 750px 以上 ： 50 * 1.6 = 80px