移动web之rem适配和less使用什么是rem？ rem是根元素字体的单位 rem单位是相对于HTML标签的字号计算结

什么是rem？

rem是根元素字体的单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式 写法

设备宽度不同，HTML标签字号设置多少合适？

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

rem单位尺寸

根据视口宽度，设置不同的HTML标签字号
书写代码，尺寸是rem单位

2.1.确定设计稿对应的设备的HTML标签字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

2.2.rem单位的尺寸
- N * 37.5 = 68 → N = 68 / 37.5
- rem单位的尺寸 = px单位数值 / 基准根字号

思考：手机设备多，屏幕尺寸不一，那我们需要检测每一种手机的视口吗？

答：不需要。

我们可以使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

 <style>
      /* 2.画宽度为70px 高度为50px的盒子 以375px屏幕大小为参考去适配移动端 */
      .box {
        width: 1.86rem;
        height: 1.33rem;
        font-size: 0.4rem;
        background-color: pink;
      }
      .box2 {
        width: 8.1081rem;
        height: 8.1081rem;
        background-color: red;
        margin: 2.7027rem auto;
      }
    </style>
  </head>
  <body>
    <div class="box">这是一个寂寞的天</div>
    <div class="box2"></div>
    <!-- 1.插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小 -->
    <script src="./js/flexible.js"></script>
  </body>

less 使用

在px单位转换到rem单位过程中，哪项工作是最麻烦的？

除法运算。CSS不支持计算写法。

解决方案：可以通过Less实现。

Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less 是vscode插件，作用：less文件`保存自动生成`css文件

Less语法

注释：

单行注释
- - 语法：// 注释内容
- - 快捷键：ctrl + /
块注释
- - 语法：/* 注释内容 */
- - 快捷键： shift + alt + A

运算：

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
注意：表达式存在多个单位以第一个单位为准

使用Less嵌套写法生成后代选择器

使用Less变量设置属性值

网页中, 文字文字颜色基本都是统一的，如果网站改版，变换文字颜色，如何修改代码？

方法一：逐一修改属性值（太繁琐）
方法二：把颜色提前存储到一个容器，设置属性值为这个容器名

在less中，我们推荐使用方法二

语法：

定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;

使用Less导入写法引用其他Less文件

导入: `@import “文件路径”;`

使用Less语法导出CSS文件

方法一：
- - 配置EasyLess插件，实现所有Less有相同的导出路径

配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是`双引号`）

方法二：控制当前Less文件导出路径
- - Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

有些文件我们也可以设置禁止导出

在less文件第一行添加: // out: false

移动web之rem适配和less使用