屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好

解决方案:

1. 百分比布局或者 flex 完成整体元素排列布局
2. 配合 rem 或者 vw/vh 单位 设置元素的尺寸（宽度/高度） 最终适配

em，rem

相同点： 都是相对单位

不同点：参照对象不同

• em是相对当前盒子文字大小
• rem是相对于html（根标签）文字大小

适配方案

移动端的适配方案：

1. flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多
2. flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势

rem适配

原理

rem适配原理：通过媒体查询 检测视口宽度，不同视口宽度设置不同的根标签文字大小

根标签通常设置为当前屏幕的1/10

单位

单位：rem

• rem是相对单位，是相对于HTML标签的字号计算结果
• 1rem = 1HTML字号大小
• 修改html 的文字大小，就可以完成元素大小的等比例缩放

媒体查询

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

写法：

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

px转rem

步骤：

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

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

2. 计算rem单位的尺寸

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

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

原理

根据不同的视口宽度给网页中html根节点设置不同的font-size。

将当前根标签大小设置为当前屏幕大小的1/10

使用方法

1. 链入js，通常写在前面
2. 将测量的px值转为rem

less

Less是一个CSS预处理器(常见的预处理器还有 Sass、Stylus), Less文件后缀是.less

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

Easy Less

Easy Less ：vscode插件，

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

语法

• 单行注释

  语法：// 注释内容

  快捷键：ctrl + /

• 块注释

  语法：/* 注释内容 */

  快捷键： shift + alt + A

运算

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

• 除法需要添加 小括号 或 .

  .box {
      width: 30px + 2;
      height: 30 + 3px;
      font-size: 10px*2;
      background-color: @baseColor;
  
      p {
          color: @baseColor;
          font-size: (16 / 37.5rem);
  
          span {
              // 表达式存在多个单位以第一个单位为准
              width: (20px / 37.5rem);
          }
  
      }
  }
  
  

  产生的.css

  .box {
    width: 32px;
    height: 33px;
    font-size: 20px;
    background-color: #ff0000;
  }
  .box p {
    color: #ff0000;
    font-size: 0.42666667rem;
  }
  .box p span {
    width: 0.53333333px;
  }
  
  

  表达式存在多个单位以第一个单位为准

嵌套

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

语法：

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

我们在写伪类和伪元素的时候，经常使用 & 来代替父元素

变量

语法：

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

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

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

//定义变量 @变量名: 值; 
@pinkColor: pink;

// 使用变量：CSS属性：@变量名;
.box {
    background-color: @pinkColor;
}

导出的.css

.box {
  background-color: pink;
}

less导入

语法：

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

以英文分号结尾

// less导入
//导入: @import “文件路径”;
@import './less01.less';
@import './less02';

less导出

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

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

• 方法二：控制当前Less文件导出路径

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

  下面的只写一个就可以，且必须写在第一行，注释写在下面

  同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出与less同名的.css

  // out: ./css/

  同一文件夹下，创建一个css文件夹（有css文件夹时直接导出），导出less05.css

  // out: ./css/less05.css

  // out: ./css/
  

  // out: ./css/less05.css
  

  less禁止导出

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

// out: false

vw/vh适配

单位

单位：vw/vh

• vw /vh是个相对单位。
• 1vw =1/100屏幕宽度 1vh = 1/100屏幕高度

不管在什么屏幕下， 我们把屏幕分为平均的 100等份。

1vw 和 1% 区别：

1. vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
2. 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px

px 如何转为vw

我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px

有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则 写成 vw 是多少？ 1vw * 1vw

又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则 转换为vw 是多少？ 10vw * 10vw

有一个盒子 68px * 29px ，则我们写代码 less vw ？

width: (68 / 3.75vw);
height: (29 / 3.75vw);

布局流程

1. 根据设计稿确定1vw尺寸
2. px单位转换成vw单位尺寸: px值 / (1/100视口宽度) vw