What are Media Queries?
Media queries were probably the most important addition to CSS (Cascading Style Sheets) in decades. They were used to make websites responsive, which means they adapt their layout and style settings depending on the viewing size of the device or screen accessing them.
One of the goals of modern web design is to eliminate the need for multiple media queries.
Instead learn to use the Clamp Function to preset values for font-size, line-height, margins and padding.
Still Some uses for Media Queries
In simpler terms:
Media queries let you apply different styles settings based on screen size, resolution, orientation, or other media features.
This is especially useful for improving the appearance of a web page on phones, tablets, laptops, and big monitors without needing separate websites.
Basic Syntax:
@media (condition) {
/* CSS rules here */
}
Common media features:
max-width / min-width: target screen width
@media (max-width: 800px) {
}
orientation: portrait or landscape
@media (orientation: landscape | portrait) {
}
hover: whether the device supports hover
@media (hover: hover | none) {
}
Why use them?
To create responsive designs that:
Improve appearance on any device
Improve user experience
Follow mobile-first or desktop-first design strategies