移动适配
什么是移动适配？
“移动适配是指使不同尺寸的手机设备页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放。”
移动端屏幕适配
1.手机屏幕比较小的手机，看到的页面元素就越小
2.手机屏幕比较大的手机，看到的页面元素就越大
我们在书写页面的时候常常用到px单位，然而px单位是绝对长度单位，大小固定不变！
然而我们想要实现屏幕适配需求，重点就在单位上只能选择相对长度单位 vw最简单也是最容易的
l rem ： 目前多数企业在用的解决方案 用得少
l vw / vh：未来的解决方案 经常使用
vw ，vh
定义：
1vw等于视口宽度的百分之一。
| 单位 | 含义 |
|---|---|
| vw | 相对与视口的宽度，视口宽度是100vw |
| vh | 相对与视口的高度，视口高度是100vh |
| vmin | vw和vh中的较小值 |
| vmax | vw和vh中的较大值 |
| 单位 | 含义 |
|---|---|
| % | 大部分相对于祖先元素，也有相对自身的情况比如(border-radius，translate) |
| vw/vh | 相对与视口的尺寸 |
rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
\1. 根据视口宽度，设置不同的HTML标签字号
\2. 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
Ø 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
Ø N * 37.5 = 68 → N = 68 / 37.5
Ø rem单位的尺寸 = px单位数值 / 基准根字号
flexible
目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
l flexible.js是手淘开发出的一个用来适配移动端的js框架。
l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
Less
Less语法
目标：使用Less运算写法完成px单位到rem单位的转换
除法运算。CSS不支持计算写法。
l 解决方案：可以通过Less实现
目标：使用Less语法快速编译生成CSS代码
l Less是一个CSS预处理器, Less文件后缀是**.less**
l 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
l 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
编译插件
目标：使用Less语法快速编译生成CSS代码
Easy Less :
l vscode插件
l 作用：less文件保存自动生成css文件
目标：使用Less语法快速编译生成CSS代码
注释：
l 单行注释
Ø 语法：// 注释内容
Ø 快捷键：ctrl + /
l 块注释
Ø 语法：
/* 注释内容 */
Ø 快捷键： shift + alt + A
目标：使用Less运算写法完成px单位到rem单位的转换
运算：
l 加、减、乘直接书写计算表达式
l 除法需要添加 小括号 或 .
l 注意：
Ø 表达式存在多个单位以第一个单位为准
目标：能够使用Less嵌套写法生成后代选择器
嵌套：
l 思考：书写CSS选择器时， 如何避免样式冲突？
目标：能够使用Less嵌套写法生成后代选择器
嵌套：
l 作用：快速生成后代选择器。
l 语法：
l 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
目标：能够使用Less变量设置属性值
变量
l 思考：
Ø 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
Ø 方法一：逐一修改属性值（太繁琐）
Ø 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
目标：能够使用Less变量设置属性值
变量
l 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名
l 变量：存储数据，方便使用和修改。
l 语法：
Ø 定义变量：@变量名: 值;
Ø 使用变量：CSS属性：@变量名;
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
