CSS Media Queries
CSS media queries are a fundamental tool for creating responsive web designs. They allow you to apply different styles to a web page based on characteristics of the device or browser, such as screen width, height, orientation, and resolution. This enables your website to adapt and look good on various devices, including desktops, laptops, tablets, and smartphones.
Media queries can be used to check many things, such as:
- width and height of the viewport
- orientation of the viewport (landscape or portrait)
- resolution
Media Query Syntax
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
Here's a basic example of how you can use media queries in CSS:
Media Query Syntax
/* Default styles for all screen sizes */
body {
font-size: 16px;
color: #333;
}
/* Media query for screens with a maximum width of 768 pixels (typical tablets) */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Media query for screens with a maximum width of 480 pixels (typical smartphones) */
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
You can click on above box to edit the code and run again.