DEV Community

Cover image for Media Queries Simplified
Ansub Khan
Ansub Khan

Posted on

Media Queries Simplified

Media queries were introduced in CSS3 and it uses @media rule to include CSS when certain conditions are true.

Media Queries allows you to target any platform you want and write specific styles for that platform, for example, you can change the layout of CSS for a mobile platform where the user opens the app in the mobile platform, this is also called responsive styles because it is responding to different devices differently.

for example:

this is the example of the webpage which has a screen size of 1200px:

@media query 1.png

when we are going to change the screen size of this to 500px screen size using this code below:

// if the browser window is smaller than 300px, the color of the font will be changed to red.

@media only screen and (max-width: 500px) {
body{
    color:red;
}
}
Enter fullscreen mode Exit fullscreen mode

it is going to look like this:

@media query 2.png

Media Query Breakpoints

these are some of the breakpoints for different devices:

Extra Small Phones

@media only screen and (max-width: 600px) {
}
Enter fullscreen mode Exit fullscreen mode

*Portrait Tablets and large Phones *

@media only screen and (min-width: 600px){

}
Enter fullscreen mode Exit fullscreen mode
  • Landscape Tablets*
@media only screen and (min-width: 768px){
}
Enter fullscreen mode Exit fullscreen mode

Laptops and Desktop

@media only screen and (min-width: 992px){
}
Enter fullscreen mode Exit fullscreen mode
  • Large Laptops and Desktops *
@media only screen and (min-width: 1200px){
}
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
lukeshiru profile image
LUKESHIRU

This is kinda outdated, mainly because nowadays we have phones with 4k screens, so 1200px is smaller than some phones, not "large laptops/desktops". Media queries shouldn’t be used assuming devices, they should be used just to have something styled based on the size of the screen, no matter the device.

Collapse
yamiteruxyz profile image
Yamiteru XYZ

The pixels in queries are not real pixels. If the screen is 4k but has 200% scaling then the browser acts as if it had half the resolution.

Collapse
lukeshiru profile image
LUKESHIRU

This still applies. You shouldn't assume device based on a screen size. You should just use the size to figure out how to make the UI work in any device. Maybe is a phone with gigantic resolution, or a super small tablet, or a browser window that isn't full-screen, your UI should work in all those scenarios without any device specific stuff.

Thread Thread
yamiteruxyz profile image
Yamiteru XYZ

Yeah I agree. But also making the design work on ANY device (aka fluid design) is kinda impossible.