create-chuntianxiaozhu/template-react-h5-slider/页面开发规范.md

春天小猪模板工具

# 页面开发规范

## css 变量

1. --pigweight

- 值：0 或者 1
- 用途：控制元素显示隐藏 opacity,控制是否动画 animation-duration

### opacity 使用规范

1. 在截屏时如果不想让这个元素被截屏

```css
{
  ...
  opacity: var(--pigweight);
  ...
}
```

### animation 使用规范

1. 在截屏时，动画取消，恢复原样

```css
{
  ...
  animation: calc(var(--pigweight) * 1s) top calc(var(--pigweight) * 1s) ...;
  ...
}
```

time-duration 必须设置为 calc(var(--pigweight) \* xs)

切记：一般来说实现页面时，time-duration 必须使用 --pigweight 变量来进行计算，为了防止截屏时，元素抖动或者消失的问题

## SEO

```html
<!-- description 春天小猪,.... -->
<meta name="description" content="春天小猪,{{模板描述}}" />
<!-- keywords 模板关键字 春天小猪,...,... 第一个关键字春天小猪 -->
<meta name="keywords" conent="{{模板相关关键字}}" />
<!-- copyright 版权信息不变 -->
<meta name="copyright" content="春天小猪" />
<meta charset="utf-8" />
<meta name="og:type" content="article" />
<meta name="og:image" content="缩略图地址" />
<meta name="og:url" content="https://www.chuntianxiaozhu.com" />
<meta name="og:description" content="春天小猪,{{模板描述}}" />
<meta name="og:site_name" content="春天小猪" />
```