移动适配方案

一 主流的两种方案

rem ： 目前多数企业在用的解决方案， 比如小米移动端

vw / vh：未来的解决方案，比如B站移动端

二 rem单位

相对 单位

rem单位是相对于 HTML标签的字号 计算结果

1rem = 1HTML字号大小

所以，我们只需要修改html 的文字大小，就可以完成元素大小的等比例缩放

三 媒体查询设置差异化CSS样式

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

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

@media (width:414px) {
    body {
            background-color: pink;
         }
}

四 rem适配原理

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

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

2. rem单位的尺寸

rem单位的尺寸 = px单位数值 / 基准根字号

五 flexible.js 

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

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

<script src="./js/flexible.js">

六 Less

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

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

Less是一个 CSS预处理器 , Less文件后缀是 .less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

常见的预处理器还有 Sass、Stylus

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less :

vscode插件

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

注意： html页面引入的还是css文件，而不是 less 文件

运算：

加、减、乘直接书写计算表达式

  除法 需要添加 小括号 或 .

// 第一种除法
// margin: 100./50px;
// 第二种除法 （）
margin: (100/50px);

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

.banner {
            width: 100%;
            height: (160/@baseSize);
            overflow: hidden;
            background-color: #fff;

            ul {
                width: 200%;
                display: flex;
            }
}

使用 Less 变量设置 属性值：

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

语法：

定义变量： @变量名: 值;

使用变量： CSS属性：@变量名;

@baseSize: 37.5rem;

padding-left: (15/@baseSize);

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

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

@import './base.less';
@import './normalize.less';

使用Less语法 导出CSS文件 ：

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

"less.compile": {
        "out": "../css/"
    },