DEV Community

Cover image for Media Queries Simplified
Ansub Khan
Ansub Khan

Posted on

11 5

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

 
the_yamiteru profile image
Yamiteru

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

Collapse
 
the_yamiteru profile image
Yamiteru

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay