移动开发之rem适配布局（rem单位、媒体查询、rem适配方案）

rem单位

• rem是一个相对单位，类似于em，但和em是有区别的。
• em是相对与父元素的字体大小来说的。
• rem是相对于html元素的字体大小来说的。
• 优点：rem可以通过修改html里面的文字大小来整体控制页面中元素的字体大小。

媒体查询

• @media可以针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小时，页面也会根据浏览器的宽度和高度重新渲染页面。

媒体查询的语法格式如下：
@media not|only mediatype and (media feature) {
    CSS 代码...;
}

注意：
1、mediatype是媒体类型；and not only是关键字（作用是将媒体类型与媒体特性或媒体特性与媒体特性连接到一起作为查询到条件）；media feature是媒体特性，必须用小括号包含），具体说明见下表：
2、媒体查询一般按照从大到小或者从小到大的顺序，但从小到大的顺序会使代码更简介

mediatype媒体类型

值	说明
all	默认值，用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

关键字

值	说明
and	可以将多个媒体特性连接到一起，相当于“且”的意思（只有当每个属性都为真时，这条查询的结果才为真）。例子如下： @media all and (min-width: 700px) and (max-width:900px) { … } 在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。所以可以写成： @media (min-width: 700px) and (max-width:900px) { … }
not	排除某个媒体类型，可以省略。例子如下： @media not all and (max-width:900px) { … }
only	指定某个特定的媒体类型，可以省略。
or	将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符。例子如下： @media (min-width: 700px), screen and (orientation: landscape) { … }

媒体特性

值	说明
width	定义输出设备中页面可见域的宽度
min-width	定义输出设备中页面最小可见域的宽度
max-width	定义输出设备中页面最大可见域的宽度

• 引入资源：简单说就是针对不同的屏幕尺寸，调用不同的css文件。

/*引入资源的语法格式如下：*/
<link rel="stylesheet" media="screen and (min-width: 320px) href="XXX.css">

rem适配方案

• 目前主流的rem适配方案有以下两种：

1. rem + less + 媒体查询

   该适配方案中设计稿基本以750px为准，并且，页面元素的rem值 = 页面元素值（px）/（屏幕宽度 / 划分的份数）

2. rem +flexible.js（更加推荐）

   flexible.js的github地址

   VSCode有一个插件“cssrem”可以实现px单位转换为rem单位。该插件设置html字体大小基准值上步骤如下：（1）打开设置，可以通过“ctrl+逗号”快捷键打开；（2）打开右上角的“settings.json“；（3）输入”cssrem"；（4）点击“编辑”按钮；（5）修改基准值；（6）重启VSCode。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！