web移动适配

rem ： 目前多数企业在用的解决方案

   vw / vh：未来的解决方案

rem

1. 网页效果
2. 屏幕宽度不同，网页元素尺寸不同（等比缩放）
3. px单位或百分比布局可以实现吗？
4. px单位是绝对单位
5.  百分比布局特点宽度自适应，高度固定
6. l 适配方案
7. rem

rem单位

• 相对单位
•  rem单位是相对于HTML标签的字号计算结果
•  1rem = 1HTML字号大小
• 使用媒体查询设置差异化CSS样式

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

 当某个条件成立, 执行对应的CSS样式

l 写法

 

rem适配

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

 rem适配原理（实现在不同宽度的设备中，网页元素尺寸等比缩放效果）

1. rem单位尺寸
2. 根据视口宽度，设置不同的HTML标签字号
3.  书写代码，尺寸是rem单位
4.  确定设计稿对应的设备的HTML标签字号
5.  查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
6.  rem单位的尺寸
7. N * 37.5 = 68 → N = 68 / 37.5
8. rem单位的尺寸 = px单位数值 / 基准根字号

flexible

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

---

flexible.js是手淘开发出的一个用来适配移动端的 js框架 。

核心原理就是根据 不同的视口宽度 给网页中 html 根节点设置不同的 font-size

 .

less语法

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

---

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

Easy Less :

l vscode插件

l 作用：less文件保存 自动生成 css文件

 

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

• 使用Less运算写法完成px单位到rem单位的转换

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

 

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

嵌套

作用：快速生成后代选择器

语法：

 

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

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

变量

• 思考：
•  网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
•  方法一：逐一修改属性值（太繁琐）
• 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

方法二：

• （详解）
• 把颜色提前存储到一个容器，设置属性值为这个容器名
•  变量：存储数据，方便使用和修改。
• 语法：
• 定义变量：@变量名: 值;
• 使用变量：CSS属性：@变量名;

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

CSS：书写link标签   Less：导入。

导入: @import “文件路径”

 

 使用Less语法导出CSS文件

方法一：

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

方法二：

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

思考：所有的Less文件都需要导出CSS文件吗？

 

禁止导出

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

 

 每日一语：