跳到主要内容

CSS 概览

问题

在 element 面板你可以检查每个元素的 CSS，那有没有办法看到整个页面的 CSS 概览呢？

::: warning 请注意 这是一个实验中的功能，有可能会导致一些问题。 :::

想看到有关页面的所有的 CSS 信息，你需要用到这个实验中的功能：

  • 打开设置，勾选 CSS 概览：

  • 重新打开 devtools 就可以看到啦：

这个面板主要包含这些信息：

1. CSS 的概览​

汇总：

  • 元素数量数量
  • 行内样式的元素数量
  • 样式规则数量
  • 媒体查询的数量
  • 类型选择器数量
  • ID 选择器数量
  • 类选择器数量
  • 属性选择器数量
  • 通配选择器数量

...

2. 颜色​

汇总了：

  • 背景颜色
  • 文本颜色
  • 填充颜色
  • 边框颜色

最关键的是，这里出现的每一种颜色，你点进去都是它对应的 CSS 定义！

这极大的方便了你找到那些和设计稿不兼容的颜色，大部分时候你都是靠全局搜索和肉眼去搜索。

3. 字体信息​

不同字体类型的统计信息，分为字体大小，字重和行高三个维度。和颜色一样，都可以跳转到具体样式定义：

4. 未使用的定义​

同样可以点进去看看为什么没有被用到，对于优化代码有很大的帮助：

5. 媒体查询​

一般我们都会做多端适配，有一种普遍的方式是使用媒体查询，但是你知道有哪些会影响到当前页面吗？