Languages: [🇪🇸] Español - [🇺🇸] English
Whether you want it to or not, modern web development is directly tied to responsive design. There are media queries everywhere, even Bootstrap and Tailwind use some sort of breakpoints related to that.
Media Query Viewer
Sometimes we think it's hard to test it, but Chrome/Edge DevTools has a hidden gem to deal and handle easily with those breakpoints. I will show you how to activate this superpower.
- Open Chrome/Edge DevTools
- Enable Mobile view
- Ensure select "Responsive" on the device list.
- Select "show media queries"
Query Bars
Depending on media queries defined on the page you would see 4 bars in different colors.
Preset sizes (Gray):
Max width (Blue):
Max and Min width (Green):
Min width (Orange)
Example
The Bootstrap page it's an excellent opportunity to see this feature in action because has multiple types of media queries.
Source Code
You can also right-click over a selected media query and see it directly on the source code.
Bonus Track
If you want to see all media queries in action at the same time I'll recommend you take a look at Responsively.
It's an amazing and open source project that will make your job easier as a developer.
That’s All Folks!
Happy Coding 🖖
Top comments (2)
Great article! It's always fascinating to explore different web browsers and their functionalities. I recently came across an interesting Post on 'Mastering CSS Responsive Media Queries For Optimal Responsive Design' It offers a comprehensive analysis of various browsers, their developer tools, and their suitability for different coding tasks. If you're interested in diving deeper into this topic, you might find it worth checking out. Happy browsing and developing!
Hey Camilo! You should check out Polypane. It can automatically detect all your media queries (like Chrome) and then create panes from them so you get a really good overview of the sizes you developed for, rather than just device sizes. It's been doing that since 2016 by the way :)