css-优化点

优化点：
回退机制
响应式布局减少媒体查询。

• 当浏览器不支持属性时，使用回退机制。

  1. 属性简写使用整合方式覆盖，如：

  background: url(...) bottom right;
  background-position: bottom 20px right 20px;

  1. 渐变色背景，使用渐变色的平均值，如：

  background: rgb(255, 128, 0);
  background: linear-gradient(90deg, yellow, red);

  1. 给元素添加辅助类，如：

  h1 { color: gray; }
  .text h1 {
      color: transparent;
      text-shadow: 0 0 3px gray;
  }

  1. 使用@supports，如：

  h1 { color: gray; }
  @supports (text-shadow: 0 0 3px gray) {
      h1 {
          color: transparent;
          text-shadow: 0 0 3px gray;
      }
  }

  1. 使用浏览器前缀，-webkit-、-moz-、-o-

• 响应式布局减少媒体查询

  1. 使用百分比。使用具体值时，因为窗口等的变化会导致具体值重新计算，百分比无需重新计算。
  2. 铺满容器的背景图片使用background-size: cover;。
  3. 较大分辨率需要固定某个值时，使用max-width。
  4. img、video、iframe 等使用max-width: 100%;。
  5. 多行多列布局使用 flexbox 或 display: inline-block;。
  6. 表格多列时控制列宽。

赏

一起吃饭