CSS media queries are a powerful tool that allow you to apply different styles based on the characteristics of the device or viewport. They enable you to create responsive designs that adapt to different screen sizes, resolutions, and device types (desktop, tablet, mobile, etc.).
The basic syntax for a media query is as follows:
css
@media [media-type] ([media-feature-rule]) {
/* CSS rules go here */
}@media is the at-rule that starts a media query.media-type (optional) specifies the type of media the styles should apply to, such as screen, print, or all (default).media-feature-rule defines the conditions or rules that must be met for the styles to apply. Common rules include min-width, max-width, orientation, and others.Media queries are essential for creating responsive websites that adapt to different screen sizes. Here’s an example of how to apply different styles based on the viewport width (see more on breakpoints below):
css
/* Styles for screens smaller than 600px (mobile devices) */
@media screen and (max-width: 599px) {
body {
font-size: 14px;
}
.container {
width: 100%;
}
}Media queries can be used to apply specific styles when a page is printed to paper:
css
/* Styles for printing */
@media print {
body {
font-size: 12pt;
color: black;
background-color: white;
}
.no-print {
display: none;
}
}You can target styles based on the device’s orientation (portrait or landscape) using the orientation media feature:
css
/* Styles for portrait orientation */
@media (orientation: portrait) {
.container {
flex-direction: column;
}
}When creating responsive designs with media queries, it’s essential to consider the screen sizes of popular devices and web browsers. By targeting specific breakpoints, you can ensure that your website or application displays correctly across a wide range of devices.
For desktop browsers, the most common breakpoints are:
css
/* Styles for large desktop screens */
@media screen and (min-width: 1920px) {
/* CSS rules */
}For tablets and mobile devices, the most common breakpoints are:
css
/* Styles for tablets in landscape orientation */
@media screen and (max-width: 1024px) and (min-width: 769px) {
/* CSS rules */
}
@media screen and (max-width: 480px) {
/* CSS rules */
}
It’s important to note that these breakpoints are general guidelines and may vary depending on your specific project requirements, target audience, and device usage patterns. It’s always a good practice to test your website or application on actual devices and make adjustments as needed.
Additionally, consider using responsive design techniques like fluid grids, flexible images, and media queries to create a seamless experience across different devices and screen sizes.
em, rem, or vw/vh for better responsiveness.min-width over max-width for better future-proofing.CSS media queries are a powerful tool that enable you to create responsive and adaptive designs. By understanding their syntax and use cases, you can create websites and applications that provide an optimal user experience across a wide range of devices and screen sizes.
