Bodingles | Colt Steele

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

W3Schools CSS Media Queries MDN Media Queries MDN Media features

Media queries are used for the following:

To conditionally apply styles with the CSS @media and @import at-rules.
To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= or sizes=" attributes.
To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.

The most commonly used properties are based on viewport size:

To use media queries, you must fist add the following to the < head> section of your webpage:

< meta name="viewport" content="width=device-width, initial-scale=1.0">
MDN Viewport meta tag

Then in CSS you would make a statement like :

@media (min-width: 600px) {
- enter styling code blocks here
}

which means, if a viewport size is at least 600px wide, do the formatting.

You can also combine queries, like so:

@media (min-width: 600px) and (max-width: 1000px) {
- enter styling code blocks here
}

which means, if a viewport size is at least 600px wide, and less than 1000px wide, do the formatting.

Device Breakpoints

W3Schools Typical Device Breakpoints

Dev Facts Device Breakpoints

At this time in 2024, there are no set standards for "Typical Device Breakpoints", there are a few general observations.

Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px)
Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px)
Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px)
Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px)
Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px)

From the Masyntech class:

Mobile devices: 480 pixels or less
Tablets and iPads: 481 to 768 pixels
Small screens and laptops: 769 to 1024 pixels
Desktops and large screens: 1025 to 1200 pixels
Extra large screens and TVs: 1201 pixels and greater

The Web Developer Bootcamp 2024

Responsive Web Design

Device Breakpoints

Media Queries