特效开发总结

最新推荐文章于 2023-11-21 10:03:26 发布

梦灬dream

最新推荐文章于 2023-11-21 10:03:26 发布

阅读量213

点赞数

文章标签： html html5 前端

本文链接：https://blog.csdn.net/nn223/article/details/127135406

版权

本文主要探讨前端特效开发，包括基于rem单位的屏幕等比例缩放布局、CSS预编译工具如Sass和Less的使用、Bootstrap的响应式布局和网格系统，以及React的资源懒加载。同时介绍了fullpage插件的使用，实现全屏滚动动画效果。

摘要由CSDN通过智能技术生成

6.float_position_flex

一、基于rem单位的屏幕等比例缩放与布局

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

知识点

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

如何等比例缩放元素

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

原理是:

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

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

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

具体操作步骤如下:

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

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

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

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

<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%;
        }

        .box_9x16::before {
            content: '';
            display: block;
            padding-top: 56.25%;
        }

        .box-container {
            /* width: 300px; */
            width: 18.75rem;
        }
    </style>
</head>

<body>
    <!-- box 作为容器 将需要比例为 3x4 的元素放入其中 -->
    <div class="box box_3x4">
        <img src="./img/big-img.png">
    </div>


    <!-- 设置指定宽度
        给 box 创建一个容器 并设置固定宽度即可
    -->
    <div class="box-container">
        <div class="box box_3x4">
            <img src="./img/big-img.png">
        </div>
    </div>

    <div class="box-container">
        <div class="box box_9x16">
            <img src="./img/big-img.png">
        </div>
    </div>
</body>

<script>

    // 定义标准屏幕宽度 600 px 标准字体大小 16px

    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>

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

/* 浏览器通常来说，最小的字体大小是 12px */

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

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

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

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

二、css预编译工具

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

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

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

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

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

三、bootstrap

1、响应式布局

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

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

2、断点

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

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

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

3、布局容器

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

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

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

4、网格布局

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

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

5.display显示方式

参考：https://getbootstrap.com/docs/5.2/utilities/display/

<!-- 语法:
        在 xs 断点下: d-{value}
        xs 以上: d-{breakpoints}-{value}
    -->

    <!-- 当屏幕宽度小于 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>