Chrome Inspect中三个media queries条形标识分别代表什么含义？

三个标识的具体含义：

• 浅蓝色条：标记页面CSS中所有**最大宽度类媒体查询（@media (max-width: 宽度值)）**的生效区间，点击对应蓝色段可直接跳转至CSS文件中该媒体查询的定义位置。
• 浅黄色条：标记页面CSS中所有**最小宽度类媒体查询（@media (min-width: 宽度值)）**的生效区间，点击对应黄色段可直接跳转至CSS文件中该媒体查询的定义位置。
• 顶部原有的灰色条：实时标记当前模拟视口的宽度位置，会随视口宽度调整同步移动，条上会显示当前视口的精确宽度数值，可直观判断当前宽度落在哪个媒体查询的生效范围内。

内容的提问来源于stack exchange，提问作者user801347