特效开发·总结

<style>

.box {

width: 100%;

background-color: #f00;

position: relative;

}

.box>* {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.box_3x4::before {

content: '';

display: block;

padding-top: 75%;

}

</style>

<div class="box box_3x4">

<img src="./img/big-img.png">

</div>

2.具体操作

1. 创建一个等比例的比例盒，作为要填充元素的父元素使用

2. 创建不同比例尺的维元素例如: .box_3x4::before 并在其中使用 padding-top 来达成固定高宽比

3. 给所有 box 的子元素添加定位和宽高

4. 给 box 填入需要固定宽高比的子元素

代码如下（示例）：

const html = document.querySelector('html')

function resize() {

let newFontSize = innerWidth / (600 / 16)

html.style.fontSize = `${newFontSize}px`

}

window.addEventListener('resize', resize)

window.addEventListener('load', resize)

三、css预编译工具

1.css预编译工具

1. 编译?

将写好的代码文件进行编码和翻译

2. 预编译？

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

3.的预编译？

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

4.应用场景

项目足够大，样式足够复杂的时候可以使用预编译工具

项目中需要复用样式，且需要定义主题，复杂的计算等功能时，可以使用预编译工具

5.预编译工具sass

6.什么是sass

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

7.作用？

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

8.市面上流行的css预编译工具

- Sass 官网：<https://sass-lang.com/guide>

- Less 官网：<http://lesscss.org/>

- Stylus 官网：<https://stylus-lang.com/>

9. 安装

需要先安装node.js

shell

npm install -g sass

10. 命令行使用方法

```shell

语法 sass <inputPath> <outputPath>

<inputPath> 要编译的 scss 或 sass 文件路径

<outputPath> 编译完的 css 文件的输出路径

sass main.scss ./css/main.css

11. 监视文件变化

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

sass --watch main.scss ./css/main.css

12.监视目录变化

路径参数变成 <inputDir>:<outputDir> 这样就可以监视文件夹中任一文件的变化并输出到对应文件夹

sass --watch ./sass:./css

2.sass语法

1. 语法

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

2.Variables 变量

scss

定义变量

3. 语法

$varName : value

$color: #fff;

4. 访问变量

.content {

color: $color; // 直接将变量名作为属性值填在对应位置就可以了

}

5. 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;

}

}

6.使用use引入其他的sass文件

假设有个 `base.scss` 文件

scss

base.scss

$color: red;

.content {

font-size: 12px;

}

7.假设有个 `main.scss` 文件在文件中引入 `base.scss` 且两个文件在同一目录下

scss

main.scss

// 使用@use引入外部 scss 文件

@use 'base'; // 该路径是相对路径，相对参考的是当前文件（main.scss）的路径

.box {

background-color: base.$color; // 调用变量是要加上 base 命名空间（namespace）

}

8. 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);

}

9. 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;

}

10. 四则运算

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);

}

四、bootstrap

1.布局

1. 响应式布局

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

bootstrap 是使用断点来完成响应式布局的

2. 断点

断点是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

通常的讲，断点，代表的就是不同的屏幕宽度

bootstrap 中如何体现断点，在class中，添加不同断点的名称，可以采用不同断点的样式

3.布局容器

通常是页面的根节点，使用 `class="container"` 来设置布局容器

布局容器受断点影响，可以设置不同断点上的容器，具体可查表：

<https://getbootstrap.com/docs/5.0/layout/containers/>

4.网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap中网格布局的灵魂样式就是行：`row`，列：`col`

2.原生表单验证

1. 给表单添加 novalidate 屏蔽自动验证报告

2. 对每个元素的 validity 属性进行验证

3. 根据每个元素的验证结果设置自定义异常 setCustomValidity

4. 提交验证报告

5. 根据验证结果执行后续网络操作

五、react

1.特点：

1.声明式

- 也就是js中的数据决定页面最终渲染的结果

- 声明式不是响应式，但往往都是同时出现共同作用页面

- 响应式：数据变化页面会立即更新

2. 组件化

- 一个包含所有外观和行为的，独立可运行的模块，称为组件

- 组件化的思想可以将复杂页面，化繁为简的进行设计

- 组件可提高代码复用性

- 一次学习，跨平台编写

- 使用 `react` 可以开发桌面web页面，移动端页面，移动app，桌面app等

2.jsx 语法

jsx 语法保留了js的所有特性，在此基础上扩展了 react 的元素声明语法，例如：

// 声明一个 react-dom

const element = <h1>Hello World</h1>

若 react-dom 标签有多行，可以用圆括号包裹

const element = (

<h1>

Hello World

</h1>

)

每一给 react-dom 只能有一个根节点

const element = (

<h1>

Hello World

</h1>

// h1 和 h2 都是根节点这个写法是错误的

<h2>

222

</h2>

)

1. 插值

将变量插入到元素中，使用大括号 `{}`

const msg = 'hello world !!!'

const element = <h1>{msg}</h1>

花括号内的插值部分可以写入任何有效的 js 表达式

2.插入html属性

直接使用引号或花括号插入表达式，如：

const styleObj = {backgroundColor: "green"}

需要注意的是 style 属性必须用花括号来插入值

不是所有的html属性名都是原始名称，例如 class 应该写为 className 并采用驼峰式命名方法而不是html的短横线因为本质上这里的标签是js代码

const element = (

<h1

style={styleObj}

className="content">

Hello World

</h1>

)

3. 使用函数创建对象

可以使用函数创建 react-dom 对象

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);

// 等价于

const element = (

<h1 className="greeting">

Hello, world!

</h1>

);

注意：jsx 中的 react-dom 内容，本质上会被 babel 翻译成 React.createElement 函数

六、资源懒加载

1.媒体文件和图片懒加载(lazy-loading)

什么是懒加载？

懒加载就是页面中看不到时，就不去加载它，当页面中出现该内容时再去加载

懒加载多用于图片和媒体文件

好处：

好处在于用户看不见的东西就不用使用浏览器去下载了

还可以让页面加载更快

2.懒加载demo

<style>

body {

margin: 0;

}

.container {

height: 100vh;

overflow: auto;

}

.content {

height: 2000px;

display: flex;

align-items: flex-end;

}

</style>

</head>

<body>

<div class="container">

<div class="content">

<img class="img" height="200" src="./img/avatar-max-img.png" data-src="./img/1.png" alt="">

</div>

</div>

</body>

<script>

const container = document.querySelector('.container')

const content = document.querySelector('.content')

const img = document.querySelector('.img')

// 绑定滚动事件

container.addEventListener('scroll', ev => {

// console.log(ev);

console.log('scrollTop1', ev.target.scrollTop);

// 计算显示图片的临界值

// scrollTop = 内容高 - 图片高 - 窗口高

let scrollTop = content.clientHeight - 200 - innerHeight

console.log('scrollTop2', scrollTop);

if (ev.target.scrollTop >= scrollTop) {

console.log('done');

console.log(img.src);

console.log(!img.src);

// 通过自定义属性 done 来控制懒加载的触发

if (!img.getAttribute('done')) {

// 加载图片

// 读取资源url

let url = img.getAttribute('data-src')

// 赋值图片 url 赋值后图片会被自动加载

img.src = url

img.setAttribute('done', 'true')

}

}

})

</script>