## 高级特效开发大纲
1. [基于rem单位的屏幕等比例缩放](#1-基于rem单位的屏幕等比例缩放)
2. [元素的固定宽高等比例缩放]()
3. [css预编译工具]()
4. [bootstrap]()
5. [资源懒加载]()
6. [react]()
7. [其他补充内容]()
### 1、基于rem单位的屏幕等比例缩放
##### 什么是rem
rem是浏览器描述长度的单位，含义为：相对于 `html` 的字体大小的单位。`1rem = html 根节点上1个字符的宽度`
##### rem的作用
使用 `rem` 单位设置的元素尺寸，会在不同的设备屏幕宽度下（例如：手机屏幕和平板屏幕）等比例缩放
##### 应用场景
当页面元素需要在不同屏幕宽度下保证元素的比例大小不变时，则可以使用 `rem`
##### 使用方法
请参考《自适应屏幕分辨率demo.html》
总结：
1. 确立参考系，定义标准设备的屏幕宽度和字体大小
2. 比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小
3. 将页面样式中的 `px` 单位换算并替换为 `rem`，方法是 `?rem = 元素的尺寸 / 标准字体大小`
4. 绑定窗口的 `resize` 和 `load` 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 `html` 的字体大小
### 2、元素的固定高度比例缩放
**如何按比例设置元素的宽高**
原理是:
一个父元素中的第一个子元素，其padding-top的百分比大小是参考的父元素的宽度
例如: padding-top: 25%，则子元素上侧内边距就是父元素宽度的25%
如此以来只要不设置父元素高度，则父元素的高度就是第一个子元素的高度，
从而让父元素宽高成比例
### 3、css预编译工具
#### 什么是预编译？
##### 编译?
将写好的代码文件进行编码和翻译
##### 预编译？
预编译就是在编译环节发生之前，提前进行一次编译。其目的通常是将一个浏览器无法识别的语法提前编译成浏览器能够识别的语法。例如: css预编译 将 sass 转换为 css，js预编译 将 ts 转换成 js 等
那么，什么是css的预编译？
在浏览器运行脚本文件之前，进行一次编译并编译成可执行的css脚本
##### 应用场景
项目足够大，样式足够复杂的时候可以使用预编译工具
项目中需要复用样式，且需要定义主题，复杂的计算等功能时，可以使用预编译工具
#### 预编译工具sass
##### 什么是sass
`sass` 工具用于对 `css` 进行预编译，预编译的css内容，是一个 `sass/scss` 文件，文件中的语法，大部分和 `css` 相同，有一部分是预编译的语法。
##### 作用？
在 `css` 的基础上扩展一些实用的功能。
##### 市面上流行的css预编译工具
- Sass 官网：[Sass: Sass Basics](https://sass-lang.com/guide "https://sass-lang.com/guide")
- Less 官网：[http://lesscss.org/](http://lesscss.org/ "http://lesscss.org/")
- Stylus 官网：[https://stylus-lang.com/](https://stylus-lang.com/ "https://stylus-lang.com/")
##### 安装
需要先安装node.js
```shell
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
```
### 4、BootStrap
官网：[https://getbootstrap.com/](https://getbootstrap.com/ "https://getbootstrap.com/")
`bootstrap` 的 `github` 地址：[GitHub - twbs/bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.](https://github.com/twbs/bootstrap "https://github.com/twbs/bootstrap")
`bootstrap` 是一个用于制作页面界面的框架
框架: 提供一个标准和规范，再由开发人员自行填充内容
###### 安装
点击页面中的 download 按钮：[Download · Bootstrap v5.0](https://getbootstrap.com/docs/5.0/getting-started/download/ "https://getbootstrap.com/docs/5.0/getting-started/download/")
或者在 `github` 中下载 `bootstrap` 源代码，源代码中的 `dist` 文件夹就是我们要用的文件
`npm` 安装
```shell
npm i bootstrap
```
### 5、资源懒加载
**什么是懒加载（lazy-loading）？**
懒加载就是页面中看不到时，就不去加载它，当页面中出现该内容时再去加载
懒加载多用于图片和媒体文件
好处：
好处在于用户看不见的东西就不用使用浏览器去下载了
还可以让页面加载更快
### 6、React
##### react简介
中文官网：[https://zh-hans.reactjs.org/](https://zh-hans.reactjs.org/ "https://zh-hans.reactjs.org/")
`react` 是一个 **js核心库**，如同 `jquery` 一样，具有大量 `react` 生态(围绕 `react` 核心开发的库)
特点：
- 声明式
- 也就是js中的数据决定页面最终渲染的结果
- 声明式不是响应式，但往往都是同时出现共同作用页面
- 响应式：数据变化页面会立即更新
- 组件化
- 一个包含所有外观和行为的，独立可运行的模块，称为组件
- 组件化的思想可以将复杂页面，化繁为简的进行设计
- 组件可提高代码复用性
- 一次学习，跨平台编写
- 使用 `react` 可以开发 桌面web页面，移动端页面，移动app，桌面app等
##### 环境搭建
## 使用cdn在html引入react
react可以在现用的html页面中直接使用，通过cdn引入以下几个库：
```html
<!-- react 需要引入 react 核心库 和 react-dom 库 -->
<script src="" target="_blank">" target="_blank">https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="" target="_blank">" target="_blank">https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 为了更方便书写 react 通常会使用 jsx 语法，为了支持该语法 需要引入 babel -->
<script src="" target="_blank">" target="_blank">https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
然后可以在 body 中加入如下代码：
```html
<body>
<div id="root"></div>
<!-- 采用 jsx 语法 需要在 type 处加上 text/babel -->
<script type="text/babel">
ReactDOM.render( <h1>Hello World</h1>, document.getElementById('root') ); </script>
</body>
```
这里需要介绍几个概念：
- react.js 这是框架核心库，用于解析 react 语法
- react-dom.js 这个库是用于 react 元素(也就是react的文档对象模型)的创建
- babel.js 这个库用来将 jsx 语法翻译为普通的 js
> 注意：此处为了学习 react 的语法引入了 jsx，在真实项目中不会在页面上直接使用 babel
##### 使用create-react-app创建react应用
这种方法需要安装 node.js
首先安装 create-react-app 命令行工具
官网：https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app
github: https://github.com/facebook/create-react-app
create-react-app文档：[https://create-react-app.dev/](https://create-react-app.dev/ "https://create-react-app.dev/")
执行以下命令安装 create-react-app 工具
```shell
npm install -g create-react-app
```
然后在任一目录下执行以下命令创建react应用：
```shell
npm init react-app <project-name>
# 或
create-react-app <project-name>
# 其中 <project-name> 是应用的名称
```
进入到项目目录下并运行 `npm run start` 启动项目
##### 创建一个使用typescript书写的react项目
https://create-react-app.dev/docs/adding-typescript
### 7、补充知识
#### filter
官网地址 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
#### fullpage
fullpage 是一个用于制作全屏滚动播放动画的工具
展示页面：[http://www.5shiguang.net/](http://www.5shiguang.net/ "http://www.5shiguang.net/")
技术官网：[fullPage.js | 单页滚动部分网站插件](https://alvarotrigo.com/fullPage/zh/ "https://alvarotrigo.com/fullPage/zh/")
github: https://github.com/alvarotrigo/fullPage.js
##### 应用场景
展示和宣传产品的时候会使用这种大屏滚动页面。
大屏滚动页面有以下一些特点：
- 整个页面内容极少，甚至没有内容
- 一般页面比较美观大气
##### 下载和安装
在上述github中下载项目
解压zip包后得到项目文件夹
找到文件夹中的 dist 文件夹
将 dist 文件夹中的内容 复制到自己项目的 css 和 js 文件夹中即可
##### 将fullpage引入页面
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- 引入 css 和 js 文件即可 -->
<link rel="stylesheet" href="./css/fullpage.min.css" />
</head>
<body>
</body>
<script src="./js/fullpage.min.js"></script>
</html>
```
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
