高级特效开发

---

rem屏幕等比例缩放

含义：相对于 html 的字体大小的单位，1rem = html 根节点上1个字符的宽度

微信小程序中：rpx ==》 相对单位（进行移动端元素大小的适配） px ==》 绝对单位

html中：html ==> font-size:16px div ==> 1rem == 16px

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

知识点：浏览器通常最小字体大小是12px,默认字体大小是16px， html根标签 默认的font-size 大小 是16px

总结：

确立参考系，定义标准设备的屏幕宽度和字体大小

比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小

js ==》 api 获取当前设备窗口的大小

window.innerWidth 获取当前设备视口的宽度

window.innerHeight 获取当前设备视口的高度

将页面样式中的 px 单位换算并替换为 rem，方法是 ?rem = 元素的尺寸 / 标准字体大小

绑定窗口的 resize 和 load 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 html 的字体大小

元素固定宽高比例缩放：

原理是:

一个父元素中的第一个子元素，其padding-top的百分比大小是参考的父元素的宽度

例如: padding-top: 25%，则子元素上侧内边距就是父元素宽度的25%

如此以来只要不设置父元素高度，则父元素的高度就是第一个子元素的高度，从而让父元素宽高成比例

具体操作步骤如下:

1.设置一个父元素，目标元素，只设置widht值

2.给该目标元素的伪元素before设置padding-top：比例值，该值绝对其目标元素的实际高度值（例如: padding-top: 25%，则子元素上侧内边距就是父元素宽度的25%）

3.设置一个辅助元素，该辅助元素以绝对定位的方式覆盖整个父元素！

.father {

width: 200px;

background-color: #f00;

/* 开启一个相对定位 */

position: relative;

}

​

.father::before {

/* 利用伪元素before充当父元素下的第一个子元素 */

display: block;

content: '';

padding-top: 20%;

}

​

/* 辅助元素 */

.son {

/* padding-top: 50%; */

/* 开启绝对定位 */

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

动态获取当前设备的宽 ：

<script>

// 应该动态的获取 当前屏幕的宽度 然后反向的计算为该屏幕设置的根节点字体大小

// 将页面样式中的 `px` 单位换算并替换为 `rem`，方法是 `?rem = 元素的尺寸 / 标准字体大小`

// 选 iPhone SE 作为我开发的标准屏幕

// 375px / 16px = 新设备的宽度 / 字体大小，js设置

// 375px / 16px = 768px / 字体大小设置

// 字体大小设置 = 768px / (375px / 16px)

​

window.addEventListener('load', () => {

console.log('load..加载完成')

console.log('加载成功后屏幕宽度：', window.innerWidth)

// 动态的设置html根节点的字体大小

document.querySelector('html').style.fontSize = window.innerWidth / (375 / 16) + 'px'

})

​

window.addEventListener('resize', () => {

console.log('屏幕大小重置')

​

console.log('新设备的屏幕宽度:', window.innerWidth)

document.querySelector('html').style.fontSize = window.innerWidth / (375 / 16) + 'px'

})

</script>

---

sass预编译工具

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

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

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

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

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

安装：首先需要安装node.js 在对应的文件夹打开集成终端输入命令：npm install -g sass

单个sass编译命令：sass A.scss A.css （每更新一次就要重新保存编译一次）

监视文件变化：sass --watch main.scss ./css/main.css （自动监视文件变化。自动输出到指定文件）

监视目录变化：sass --watch ./sass:./css （监视文件夹中任一文件的变化并输出到对应文件夹）

sass语法：

Variables 变量：①定义变量： $color: #fff；②访问变量：.content { color: $color;}

Nesting 嵌套：嵌套 的内容 最终被解释翻译成了后代选择器

使用 use 引入其他的 sass 文件：

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

@use 'base' .box{background-color: base.$color;}

mixin 混合:定义函数 类似定义一个函数 圆括号中是参数列表 rg:

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