'Chrome Inspect what do the THREE media queries bars signify
In Chrome Inspect there is an option to 'show media queries' this results in two addional 'bars' being displayed near the top of the pane. (see pic.)
- A light-blue bar
- A yellowish bar, and
- The grey bar at the top (which is already there it seems).
What is the significance of these THREE bars?
Solution 1:[1]
The grey bar on top is NOT a part of the media query bar. It is just used to set the responsive width to existing preset values.
Media query bars can be of 3 types.
The blue bar shows "max-width" media queries.
The orange bar shows "min-width" media queries
A green bar ( if you had one ) would show media queries with both min and max widths.
You should be able to left click to apply the corresponding "triggering width", and right click to reveal the source. ( For green media queries, you can click again to toggle between min and max )
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Abhinav Vishak |