特效开发总结_main.css.map

作者：weixin_40725706 | 2024-02-18 21:48:11

踩

main.css.map

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

rem是浏览器描述长度的单位，含义为：相对于 `html` 的字体大小的单位。1rem = html 根节点上1个字符的宽度。使用 `rem` 单位设置的元素尺寸，会在不同的设备屏幕宽度下（例如：手机屏幕和平板屏幕）等比例缩放。当页面元素需要在不同屏幕宽度下保证元素的比例大小不变时，则可以使用 `rem`

使用方法：


<!-- 设置默认字体大小为我们所定义的标准字体大小 -->
<html lang="en" style="font-size: 20px;">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
 
        .box {
            background-color: #f00;
            /* width: 300px;
            height: 300px; */
            /* 3. 根据标准字体大小计算rem值 */
            width: 15rem;
            height: 15rem;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    // 1. 确立参考系，定义标准设备的屏幕宽度和字体大小
    // 2. 比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小
    // 3. 将页面样式中的 `px` 单位换算并替换为 `rem`，方法是`?rem = 元素的尺寸 / 标准字体大小`
    // 4. 绑定窗口的 `resize` 和 `load` 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置 `html` 的字体大小
 
    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)
</script>
</html>

二、css预编译工具

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

预编译工具sass

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

安装：使用node.js 在终端中输入npm init -y 和 npm install -g sass

命令行中将sass编译为css的使用方法：

1、语法 sass <inputPath> <outputPath>

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

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

sass main.scss ./css/main.css

2、监视文件变化

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

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

3、监视目录变化

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

sass --watch ./sass:./css

sass编译内容变化

例如：main.scss编译为main.css内容变化如下

main.scss


// 引入其他scss文件
// 后缀名可以省略
@use './util/base';
// 引入css文件
// 后缀名不能省略
@use '../css/other.css';
 
 
// 变量
$size: 32px;
$color: rgb(170, 0, 255);
 
// 使用变量
.box {
    width: 100px;
    height: 100px;
 
    // 访问变量
    font-size: $size;
    background-color: $color;
}
 
 
// 嵌套
// 嵌套的本质就是后代选择器
ul {
    border: 5px solid #ff0;
 
    li {
        background-color: #f00;
    }
}
 
.box2 {
    // 引入其他 scss 文件内的变量
    width: base.$width;
    height: base.$height;
    background-color: #0f0;
}
 
 
// 定义一个混合
@mixin fn($a: 50px, $b: orange){
    height: $a;
    color: $b;
    border: 1px solid #000;
}
 
.box3 {
    width: 100px;
 
    // 不带参数调用混合
    @include fn;
 
    // 带指定参数
    @include fn($b: rgb(132, 0, 255));
 
    // 按顺序传参
    @include fn(50px, #f00);
}
 
// 样式的继承
// 声明父样式
%parent {
    width: 200px;
    height: 200px;
    background-color:rgb(132, 0, 255);
}
 
.box4 {
    // 子样式继承父样式
    @extend %parent;
    // 子样式可以有自己的样式
    color: #fff;
    // 也可以覆盖父样式
    width: 300px;
}
 
// 四则运算
.box4 {
    // 加减法需要相同单位进行运算
    // width: 1px + 1em;
    width: 100px + 100px;
    width: 200px - 100px;
    width: 100% - 50%;
 
    // 乘除
 
    // 乘法只能用一个带单位的值乘以一个不带单位的数字
    width: 5px * 10;
    // width: (50rem/25rem) * 1px;
    // 除法只能使用 calc 计算函数
    width: calc(50rem / 25rem) * 1px;
}

main.css


h1 {
  background-color: rgb(0, 191, 255);
}
 
h2 {
  background-color: violet;
}
 
.box {
  width: 100px;
  height: 100px;
  font-size: 32px;
  background-color: rgb(170, 0, 255);
}
 
ul {
  border: 5px solid #ff0;
}
ul li {
  background-color: #f00;
}
 
.box2 {
  width: 500px;
  height: 700px;
  background-color: #0f0;
}
 
.box3 {
  width: 100px;
  height: 50px;
  color: orange;
  border: 1px solid #000;
  height: 50px;
  color: rgb(132, 0, 255);
  border: 1px solid #000;
  height: 50px;
  color: #f00;
  border: 1px solid #000;
}
 
.box4 {
  width: 200px;
  height: 200px;
  background-color: rgb(132, 0, 255);
}
 
.box4 {
  color: #fff;
  width: 300px;
}
 
.box4 {
  width: 200px;
  width: 100px;
  width: 50%;
  width: 50px;
  width: 2px;
}
 
/*# sourceMappingURL=main.css.map */

三、bootstrap

官网：<https://getbootstrap.com/>

bootstrap 是一个用于制作页面界面的框架

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

2、使用node.js 在终端中输入npm init -y 和 npm i bootstrap

display显示卡方式 https://getbootstrap.com/docs/5.2/utilities/display/

浮动float https://getbootstrap.com/docs/5.2/utilities/float/

定位position https://getbootstrap.com/docs/5.2/utilities/position/

flex布局 https://getbootstrap.com/docs/5.2/utilities/flex/

grid网格 https://getbootstrap.com/docs/5.2/layout/grid/

背景色 https://getbootstrap.com/docs/5.2/utilities/background/

文本色 https://getbootstrap.com/docs/5.2/utilities/colors/

文本+背景色 https://getbootstrap.com/docs/5.2/helpers/color-background/

元素大小 https://getbootstrap.com/docs/5.2/utilities/sizing/

内边距外边距space: https://getbootstrap.com/docs/5.2/utilities/spacing/

元素间的间距stacks: https://getbootstrap.com/docs/5.2/helpers/stacks/

文本有关内容 https://getbootstrap.com/docs/5.2/utilities/text/

选择 https://getbootstrap.com/docs/5.2/forms/select/

单选和多选等按钮 https://getbootstrap.com/docs/5.2/forms/checks-radios/

表单验证

1、原生表单验证


<!--
    input 的验证属性
        required
        pattern
        minlength maxlength
        min max
        type
    novalidate 屏蔽html自带的验证报告
    input 的 validity 属性
        validity.valueMissing
        validity.patternMismatch
        validity.rangeOverflow
        validity.rangeUnderflow
        validity.tooLong
        validity.tooShort
        validity.valid
    自定义提示信息
        input.setCustomValidity
    form 或 input 的 checkValidity
    显示验证报告
        form.reportValidity()
    表单验证总结步骤
        1. 给表单添加 novalidate 屏蔽自动验证报告
        2. 对每个元素的 validity 属性进行验证
        3. 根据每个元素的验证结果设置自定义异常 setCustomValidity
        4. 提交验证报告
        5. 根据验证结果执行后续网络操作
-->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
 
<body class="d-flex justify-content-center">
    <!-- novalidate 屏蔽默认的表单提交时的验证报告
        屏蔽掉自动的验证报告的目的 是为了我们自己好去控制验证报告
    -->
    <form class="card p-3" style="width: 500px;" onsubmit="return fa

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/110767