CSS

/*  页眉 */
@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader {
  position: running(pageHeader);
}

/* 对滤镜使用渐变 */
.active {
  transition: 1s filter linear;
  -webkit-transition: 1s -webkit-filter linear;
  -moz-transition: 1s -moz-filter linear;
  -ms-transition: 1s -ms-filter linear;
  -o-transition: 1s -o-filter linear;
}

.mytextwithicon {
  position: relative;
}
.mytextwithicon:before {
  content: '\25AE'; /* 修改为需要的值 */
  font-family: FontAwesome;
  left: -5px;
  position: absolute;
  top: 0;
}

/* 针对容器的属性 */
.container{
  display: flex;
  /* 排序方向 */
  flex-direction: row;
  /*flex-direction: row | row-reverse | column | column-reverse;*/

  /* 换行控制 */
  flex-wrap: nowrap
  /*flex-wrap: nowrap | wrap | wrap-reverse;*/

  /* flex-direction 和 flex-wrap 的缩写 */
  flex-flow: row nowrap;
  /*flex-flow: <‘flex-direction’> || <‘flex-wrap’>*/

  /* 内容间隔控制 */
  justify-content: flex-start;
  /*justify-content: flex-start | flex-end | center | space-between | space-around;*/

  /* 内容对齐控制 */
  align-items: flex-start;
  /*align-items: flex-start | flex-end | center | baseline | stretch;*/

  /* 控制内容有多行时的行间距 */
  align-content: flex-start;
  /*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/
}
/* 针对自身的属性 */
.item{
  /* 顺序控制 */
  /*order: <integer>;*/

  /* 宽度增长控制 */
  flex-grow: 0;
  /*flex-grow: <number>;*/

  /* 宽度收缩控制 */
  flex-shrink: 0;
  /*flex-shrink: <number>;*/

  /* 基础尺寸控制 */
  flex-basis: auto;
  /*flex-basis: <length> | auto;*/

  /* 参数缩写 */
  flex: 0 0 auto;
  /*flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]*/

  /* 元素对齐控制 */
  align-self: flex-start;
  /*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/
}

.over-test {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

// 允许 css 中的 :active 样式在移动端 safari 生效
document.addEventListener('touchstart', function () {}, true);

.target {
  /* 将 visibility 也加入转换, 时间等同 */
  transition: opacity 250ms ease-out, visibility 250ms linear;
}

.overlay {
  pointer-events: none;
}
.container .button {
  pointer-events: auto;
}

.container {
  width: 100%;
  /* 4:3 */
  padding-bottom: 75%;
}

/* 保证绝对的 9/16, 并且在屏幕居中 */
.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}