介绍移动布局

移动布局

移动适配指网页元素的宽高都要随着设备的宽度等比例缩放

解决方案：

0. rem ：目前多数企业在用的解决方案 （尺寸单位）
1. vw / vh：未来的解决方案

rem是什么

0. rem是一个相对单位

1. 是相对于HTML标签的字号计算结果

2. 1rem=1HTML标签字号大小

   • 比如：HTML标签字号大小为font-size：20px则1rem=20，5rem=5*20=100px
   • HTML网页根标签就是html标签

/* 1rem = 1html标签字号大小 */
        
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: blue;
        }

效果图：5rem=5 * 20 , 3rem=3 * 20

rem移动适配 - 媒体查询

使用媒体查询, 根据不同的视口宽度(设备宽度), 设置不同的根字号

目标：能够使用媒体查询设置差异化CSS样式

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

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

计算rem

0. 先确定设计稿的尺寸

• N * 37.5 = 68 → N = 68 / 37.5
• rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)

rem适配原理(重要)

目标： 实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem单位尺寸

0. 根据视口宽度，设置不同的HTML标签字号

1. 书写代码，尺寸是rem单位

   • 确定设计稿对应的设备的HTML标签(基准根字号)字号

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

   • rem单位的尺寸

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

   • rem单位的尺寸 = px单位数值 / 基准根字号 (结果取3位小数)

flexible.js

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

less

目标：使用Less语法快速编译生成CSS代码

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

less语法(运算)

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

less语法(嵌套)

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

方便代码迁移

最好不要超过三层嵌套

注意：&符号不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

less语法(变量)

目标：能够使用Less变量设置属性值

作用：存储数据

方便修改：例如网页有1000个颜色，只要修改变量值即可

方法：

• 把颜色提前存储到一个容器，设置属性值为这个容器名

• 变量：存储数据，方便使用和修改。

• 语法：

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

less语法(导入)

目标：能够使用Less导入写法引用其他Less文件

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

less语法(导出)

目标：使用Less语法导出CSS文件

*注意：*添加代码的时候加上逗号

(插件配置)方法：

• 配置EasyLess插件， 实现所有Less有相同的导出路径
• 配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

单独路径：

• Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

  • // out: ./abc/
  • 注意要在第一行添加

禁止导出

[外链图片转存中…(img-2IeHMdN2-1646700535258)]

单独路径：

• Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

  • // out: ./abc/
  • 注意要在第一行添加

禁止导出

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