这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）
这是前端基础系列里的第5篇《移动端开发》
1：rem适配布局
rem单位
是一个相对单位，类似于em，em是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小
/* 根html 为 12px /
html {
font-size: 12px;
}
/ 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
2：媒体查询
什么是媒体查询
媒体查询（Media Query）是CSS3新语法。
使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
手机，平板等设备都用得到多媒体查询
媒体查询语法规范
用 @media开头 注意@符号
mediatype 媒体类型
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，平板电脑，智能手机等
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。
media feature 媒体特性
必须有小括号包含
不同媒体类型的媒体特性设置不同的展示风格
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
rem与媒体查询配合
3：less 基础 css弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS 没有很好的计算能力 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。 Less 介绍(lesscss.cn/) Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 常见的CSS预处理器：Sass、Less、Stylus Less安装 安装nodejs，可选择版本(8.0) 使用cmd命令“npm install -g less”即安装less lessc -v 查看版本 Less 变量 变量是指没有固定的值，可以改变的 @变量名:值; 必须有@为前缀 不能包含特殊字符 不能以数字开头 大小写敏感 @color: pink;
Less 编译
VS Code 插件安装及使用
保存一下Less文件，会自动生成同名的CSS文件
HTML 中引入生成后的CSS 文件即可
Less 嵌套
遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
Less 运算
Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
任何数字、颜色或者变量都可以参与运算
注意
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
