# 1. font-display: swap; —— 别再 “劫持” 文字渲染

字体漂亮；字体也会耍脾气。

自定义字体没加载完，浏览器就把文本空着 —— 用户看着一片空白，糟透了。只需一行 CSS，就能止损：

@font-face {

  font-family: 'YourFont';

  src: url('YourFont.woff2') format('woff2');

  font-display: swap;

}

含义是：先用系统字体把内容展示出来，等自定义字体准备好再替换。内容即刻可见，因此用户不流失。

# transition-group

transition-group 是表示的一组动画，一般常配合 v-for 动态渲染使用，由于 transition 中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入 transition-group 使用。

使用 el-input 的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当 el-form 表单中只有一个 input 时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。

# 解决办法:

# 方法一：

• 取消 form 、 el-form 元素，非必要 form ，换成 div

# 媒体查询两种方法:

# css 方式

@media screen and (max-width: 600px) { 

/* 当屏幕尺寸小于 600px 时，应用下面的 CSS 样式 */

  .class {

    background: #ccc;

  }

}

/* 当屏幕尺寸大于 900px 时，应用下面的 CSS 样式 */

@media screen and (min-width: 900px) {

  .class {

    background: #fff;

  }

}

Keyframe 演示动画

常用属性：

1. name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
2. appear: boolean，是否在初始渲染时使用过渡。默认为 false。
3. css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
4. type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
5. mode: string，控制离开 / 进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
6. duration: number | {enter: number, leave: number} 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

---

自定义过渡类名属性：

1. enter-class: string
2. leave-class: string
3. appear-class: string
4. enter-to-class: string
5. leave-to-class: string
6. appear-to-class: string
7. enter-active-class: string
8. leave-active-class: string
9. appear-active-class: string

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。

语法:

transform: none|transform-functions;

/* 即：*/

transform: rotate | scale | skew | translate |matrix;