特效开发总结

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

 const html = document.querySelector('html')

    // 1. 我们定义 标准屏幕宽为 600px 标准字体大小为 20px;

    // 2. 计算新的屏幕尺寸下的新的字体大小

    let newFontSize = window.innerWidth / (600 / 20)

    // 重新计算字体大小

    function resize() {

        let newFontSize = window.innerWidth / (600 / 20)

        console.log(newFontSize);

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

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

    }

    // 3. 绑定窗口尺寸变化事件和页面加载事件

    window.addEventListener('resize', resize)

    window.addEventListener('load', resize)

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

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

            原理是:

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

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

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

具体操作步骤如下:

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

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

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

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

 <div class="box-container">

        <div class="box box_3x4">

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

        </div>

    </div>

<script>

 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)

</script>

3.预编译工具

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

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

 [语法](#语法)

  - [Variables 变量](#variables-变量)

  - [Nesting 嵌套](#nesting-嵌套)

  - [使用use引入其他的sass文件](#使用use引入其他的sass文件)

4.bootstrap

1.container布局

使用bootstrap的容器进行响应式布局的话，需要在head标签加上meta

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

运用类名来进行改变

class='container-sm'  md  lg  xl  xxl  fluid

2.display显示方式

 <!-- 当屏幕宽度小于 sm 时显示 -->

    <div class="container d-block d-sm-none">小于 sm</div>

    <!-- 当屏幕宽度为 md 时 显示 -->

    <div class="container d-none d-sm-block d-md-none">md</div>

    <!-- 当屏幕宽度大于 lg 时 显示 -->

    <div class="container d-none d-md-block">大于 lg</div>

3.float \position\flex

float-start左浮  float-end右浮 clearfix 清除浮动

4.grid网格

利用行及列进行布局

row行

 col 语法: col-{breakpoints}-{value}

                例如: col-sm-3 col-lg-12

                value: 范围在 1~12

                bootstrap 中 一行 row 被等分为 12 分 那么col的value值代表的是占多少份

                例如: col-3 此单元格占 12分之3份

<!-- 在 row 上可以使用flex 的 align-items 来进行竖直方向的排列 -->

 class="row border border-3 align-items-center"

 <!-- 在 row 上可以使用 flex 的 justify-content 来进行水平方向的排列 -->

class="row border border-3 justify-content-between"

 <!-- offset 设置单元格左侧的偏移量 数字代表的含义和 col 相同 -->

 class="col-3 offset-3"

 <!-- 添加单元格间距使用 gutter 首字母为 g

            可以使用 g-{value} 或 gx-{value} gy-{value}