高级特效开发——知识点梳理

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

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

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

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

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

自适应屏幕分辨率：拿到当前设备的宽度后通过比例公式设置 字体的大小

                                标准设备宽度 / 字体大小  = 当前设备宽度 / 字体大小

元素的固定宽高比等比例缩放

如何按比例设置元素的宽高

            原理是:

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

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

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

            具体操作步骤如下:

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

            2.给该目标元素的伪元素before设置padding-top：值，该值绝对其目标元素的实际高度值

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

 

 

 

CSS预编译工具——sass

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

 市面上流行的 css 预编译工具： - Sass 官网：<https://sass-lang.com/guide>

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

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

在安装 sass 预编译工具之前应该装一个 nodejs 利用 nodejs 中附带的 npm 包管理器进行下载 sass 预编译的工具  

注意：直接在浏览器中引入scss文件，浏览器是无法识别的

          1.利用sass对scss文件进行预编译

          2.得到预编译后的文件 css文件

          3.引入该css文件

终端:

编译sass文件：sass A.scss A.css

                         sass A.scss ./css/A.css

                         sass ./scss/A.scss ./css/A.css

监听sass文件：sass --watch A.scss A.css

监听目录下sass文件：sass --watch ./scss/A.scss ./css/A.css

sass语法：

1.Variables 变量         语法：$varName : value

例：$color: #fff;

//访问变量.content {

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

                  }

2.Nesting 嵌套        嵌套 的内容 最终被解释翻译成了 子代选择器,这样的话 内部的样式 只有在 nav 的子代才会生效

例：nav {

        ul {

             margin: 0;

             padding: 0;

             list-style: none;

            }

        li {

               display: inline-block;

             }

           }

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

假设有个文件`base.scss`

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

使用@use引入外部 scss 文件

例：@use 'base'

4.mixin 混合

定义函数：类似定义一个函数，圆括号中是参数列表

 

 

 5.extend 继承

%父类名       子类通过 @extend 关键字继承父类

子类可以有自己的属性   且 子类属性若和父类属性重复的话 子类属性会覆盖父类的属性

 6.四则运算

 sass 中数值可以做四则运算，但是四则运算的两个数字必须单位相同

bootstrap框架

安装方式一：官网下载

点击页面中的 download 按钮：<https://getbootstrap.com/docs/5.0/getting-started/download/>

或者在 `github` 中下载 `bootstrap` 源代码，源代码中的 `dist` 文件夹就是我们要用的文件