CSS Media Queries allow you to apply different styles to a webpage depending on the device's screen size, orientation, resolution, or specific user preferences.
They are the foundational pillar of modern responsive web design.
A standard media query consists of the @media at-rule, an optional media type, and a condition enclosed in parentheses.
@media media-type and (condition) {
/* CSS rules apply only if the condition is true */
body {
background-color: lightblue;
}
}
- Most developers use media queries to modify layouts based on the device width.
Max-Width
Max-Width: Applies styles when the viewport is smaller than or equal to a specified size.
@media screen and (max-width: 768px) {
/* Styles target mobile devices and tablets */
.sidebar { display: none; }
}
Min-Width
Min-Width: Applies styles when the viewport is larger than or equal to a specified size.
@media screen and (min-width: 1024px) {
/* Styles target desktops and laptops */
.container { max-width: 960px; }
}
Modern Range Syntax
Modern browsers support a cleaner mathematical syntax that replaces confusing min-width and max-width declarations with standard comparison operators.
@media (width <= 768px) { ... }
@media (480px <= width <= 1024px) { ... }
Multiple media queries example
body{
background-color: white;
}
/* Mobile */
@media (max-width: 600px){
body{
background-color: lightblue;
}
}
/* Tablet */
@media (min-width: 601px) and (max-width: 992px){
body{
background-color: lightgreen;
}
}
/* Desktop */
@media (min-width: 993px){
body{
background-color: lightcoral;
}
}
and ===> Combines conditions
max-width ===> Up to specified width
min-width ===> From specified width
orientation: portrait ===> Vertical mode
orientation: landscape ===> Horizontal mode
Orientation Example
@media (orientation: landscape){
body{
background-color: yellow;
}
}
Best Practice
Most Developers use:
/* Default styles for mobile */
@media (min-width: 768px){
/* Tablet/Desktop styles */
}
This approach is called Mobile First Design.
Short Definition for Interview
Media queries in CSS are used to create responsive web designs by applying different styles based on screen size, device type, or orientation.
Resolution
In media queries, resolution means:
The clarity or pixel density of a screen
It tells how many pixels are displayed in a given area of the screen.
Simple Understanding
A normal screen and a high-quality screen may have the same size, but the high-quality screen contains more pixels.
Example:
Normal display → fewer pixels.
Retina/4K display → more pixels → sharper image.
Resolution in CSS Media Queries
We use resolution media queries to apply styles for:
High DPI screens
Retina displays
2K/4K screens
Better image quality
Syntax
@media (min-resolution: 2dppx){
/* CSS */
}
Units Used
dpi ===> Dots per inch
dppx ===> Dots per pixel
x ===> Device pixel ratio
Example — High Resolution Screen
body{
background-image: url("normal-image.png");
}
/* For high-resolution screens */
@media (min-resolution: 2dppx){
body{
background-image: url("hd-image.png");
}
}
here you see the difference that normal screen uses (normal-image.png) normal image but the high resolution screen uses (hd-image.png) hd image. like this we write a media query based on the device resolution.
How it works
Media queries work by checking device conditions like screen width, height, orientation, or resolution, and then applying specific CSS styles only when those conditions are satisfied.
Top comments (0)