特效开发知识点总结

1.基于rem单位的屏幕等比例缩放

1.浏览器上默认的和最小的字体大小

浏览器通常来说，最小的字体大小是 12px

浏览器通常来说，默认的字体大小是 16px 

2.使用rem进行屏幕自适应布局

rem概念：rem是浏览器描述长度的单位，含义为：相对于 `html` 的字体大小的单位。1rem = html 根节点上1个字符的宽度。

rem作用：使用 `rem` 单位设置的元素尺寸，会在不同的设备屏幕宽度下（例如：手机屏幕和平板屏幕）等比例缩放。

rem应用场景：当页面元素需要在不同屏幕宽度下保证元素的比例大小不变时，则可以使用 `rem`

总结：
1. 确立参考系，定义标准设备的屏幕宽度和字体大小
2. 比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小
3. 将页面样式中的 `px` 单位换算并替换为 `rem`，方法是 `?rem = 元素的尺寸 / 标准字体大小`
4. 绑定窗口的 `resize` 和 `load` 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 `html` 的字体大小

2.css预编译工具

1.预编译

预编译就是在编译环节发生之前，提前进行一次编译。其目的通常是将一个浏览器无法识别的语法提前编译成浏览器能够识别的语法。例如: css预编译 将 sass 转换为 css，js预编译 将 ts 转换成 js 等。

css的预编译：在浏览器运行脚本文件之前，进行一次编译并编译成可执行的css脚本。

预编译应用场景：项目足够大，样式足够复杂的时候可以使用预编译工具。项目中需要复用样式，且需要定义主题，复杂的计算等功能时，可以使用预编译工具。

2.sass

`sass` 工具用于对 `css` 进行预编译，预编译的css内容，是一个 `sass/scss` 文件，文件中的语法，大部分和 `css` 相同，有一部分是预编译的语法。

作用：在 `css` 的基础上扩展一些实用的功能。

安装：在安装node.js的基础上在项目终端中使用npm install -g sass安装。

使用方法：
```shell
# 语法 sass <inputPath> <outputPath>
# <inputPath> 要编译的 scss 或 sass 文件路径
# <outputPath> 编译完的 css 文件的输出路径
sass main.scss ./css/main.css

# 监视文件变化
# 添加 --watch 标识 可以让sass自动监视文件变化 然后自动输出到指定文件
sass --watch main.scss ./css/main.css

# 监视目录变化
# 路径参数变成 <inputDir>:<outputDir> 这样就可以监视文件夹中任一文件的变化并输出到对应文件夹
sass --watch ./sass:./css
```

sass语法：

# 语法
文档：https://sass-lang.com/guide

## Variables 变量
```scss
// 定义变量
// 语法
// $varName : value
$color: #fff;

// 访问变量
.content {
    color: $color; // 直接将变量名作为属性值填在对应位置就可以了
}
```

## Nesting 嵌套
```scss
nav {
    // 嵌套 的内容 最终被解释翻译成了 子代选择器
    // 这样的话 内部的样式 只有在 nav 的子代才会生效
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
```

## 使用use引入其他的sass文件
假设有个 `base.scss` 文件
```scss
// base.scss
$color: red;
.content {
    font-size: 12px;
}
```
假设有个 `main.scss` 文件 在文件中引入 `base.scss` 且 两个文件在同一目录下
```scss
// main.scss
// 使用@use引入外部 scss 文件
@use 'base'; // 该路径是相对路径，相对参考的是当前文件（main.scss）的路径
.box {
    background-color: base.$color; // 调用变量是要加上 base 命名空间（namespace）
}
```

## mixin 混合
```scss
// 定义函数
// 类似定义一个函数
// 圆括号中是参数列表
@mixin fn($primary-color: #00f, $secondary-color: #ccc) {
    color: $primary-color;
    background-color: $secondary-color;
    width: 200px;
    height: 100px;
}
.child1 {
    // 不带参数调用函数fn
    // 这样的话 child1 将具备 fn 的所有样式
    @include fn;
}
.child2 {
    // 带参数调用函数fn
    // 可以给参数显示的声明参数名
    // 多个参数间用逗号隔开
    @include fn($secondary-color: #000, $primary-color: #fff);
}
.child3 {
    // 带参数调用函数fn
    // 类似js调用函数，参数按顺序传入
    @include fn(red, green);
}
```

## extend 继承
```scss
// 声明父类
%parent {
    border: 1px solid black;
    font-size: 16px;
    font-weight: 200;
    font-family: "微软雅黑";
}
// 声明子类
.child1 {
    // 通过 @extend 关键字继承父类
    @extend %parent;
    // 子类可以有自己的属性
    // 且 子类属性若和父类属性重复的话 子类属性会覆盖父类的属性
    color: green;
    border-color: yellow;
    font-size: 64px;
}
```

## 四则运算
```scss
.content {
    // sass 中数值可以做四则运算，但是四则运算的两个数字必须单位相同
    // 或者 乘除运算可以直接和不带单位的数字进行运算（相当于放大或缩小一定的倍数）
    // width: 10ex / 3ex * 10 * 5px;
    // height: 15px * 5;
    width: 10px + 2 * 5px;
    height: ((1px + 1px) / ((50rem/25rem) * 1px)) * 5rem;
    transition: (1ms / 12ms * 5s) linear forward;
    transform: rotateX(30deg * 3);
}
```

3.bootstrap

1.简介与安装

`bootstrap` 是一个用于制作页面界面的框架

## 安装
点击页面中的 download 按钮：<https://getbootstrap.com/docs/5.0/getting-started/download/>
或者在 `github` 中下载 `bootstrap` 源代码，源代码中的 `dist` 文件夹就是我们要用的文件

`npm` 安装
```shell
npm i bootstrap
```

2.自定义主题

1. 下载 `bootstrap` 源代码
   - 创建一个文件夹用于存放 `bootstrap` 源代码（建议使用英文文件夹）
   - 在文件夹中打开 `cmd`
   - 运行 `npm init -y`
   - 运行 `npm install bootstrap`
2. 根据需要修改 `node_modules/bootstrap/scss` 目录下的代码
3. 运行 `sass` 进行编译，重新编译 `bootstrap.scss` 文件
4. 输出 `bootstrap.css` 文件

3.布局

## 响应式布局
响应式布局就是根据屏幕宽度，切换不同页面布局的一种布局方式，这里可以查看 bootstrap 官网在