一 rem适配
html字体大小设置为屏幕视口的 1/10
屏幕宽度为320px 375px 414px 对应的HTML字体大小为32px, 37.5px, 41.4px
那么问题来了：
1手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
2设备宽度不同，HTML标签字号设置多少合适？
解答： 适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
二 rem 移动适配 - 媒体查询
媒体查询能够设置差异化CSS样式
-
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
-
当某个条件成立, 执行对应的CSS样式
1，以视口宽度为375为例 我们使用媒体查询
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
2.适配 414宽度 的手机
@media (width: 414px) {
html {
font-size: 41.4px;
}
}`
快捷小技巧
三 日常开发中rem单位尺寸的应用
-
根据视口宽度，设置不同的HTML标签字号
-
书写代码，尺寸是rem单位
-
确定设计稿对应的设备的HTML标签字号
-
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
- rem单位的尺寸
-
N * 37.5 = 68 → N = 68 / 37.5
-
rem单位的尺寸 = px单位数值 / 基准根字号
那么问题又来了：
思考：咱们检测了3个视口，分别设置了根字号，有什么弊端吗？
答：手机设备多，屏幕尺寸不一，视口不仅仅有这3个
所以现在企业开发中，为了方便，不会再去手写媒体查询的样式了，而是通过一个flexible.js插件。
-
flexible.js是手淘开发出的一个用来适配移动端的js框架。
-
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
四 less语法
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
通过安装该插件，我们编写的less文件在保存时，会自动生成对应的css文件，我们再在html文件中引入该css文件即可。
less语法-注释
需要注意的是：
// 单行注释不会被转换为css
/* 多行注释才会被转换为css */
less语法-运算
代码经转译为css文件后，box的高度为460px
less语法-嵌套选择器
less语法-变量
思考：网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
方法一：逐一修改属性值（太繁琐）
方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
less语法-导入
开发网站时，网页如何引入公共样式？
- CSS：书写link标签
- Less：导入
less语法-导出
方法一：
-
配置EasyLess插件， 实现所有Less有相同的导出路径
-
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
注意点：
1 路径如果要表示文件夹，最后一定要有/
2 属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
然而并不是所有的文件都需要导出，有些文件需要禁止导出。
压缩导出语法：
导出后的代码格式为：
