//
In today's digital age, web development is not just about creating visually appealing websites; it's also about ensuring that those websites are accessible and usable across a wide range of devices. Responsive design plays a crucial role in achieving this goal by adapting the layout and content to fit different screen sizes, from mobile phones to desktop computers.
One of the key tools for implementing responsive design is CSS Media Queries. These allow you to apply different styles based on characteristics like screen width, height, orientation, resolution, and more. By using media queries, you can create a seamless user experience that works well on any device.
Media queries are essentially conditional statements in CSS that check the properties of the browser window or device before applying specific styles. They follow this basic syntax:
@media (condition) {
/* CSS rules to apply if condition is true */
}
The `@media` rule is followed by a condition inside parentheses, and then a block of CSS code enclosed in curly braces. If the condition evaluates to true, the styles within the block are applied.
### Common Media Features
Here are some common media features you can use in your queries:
- **width**: The width of the viewport.
- **height**: The height of the viewport.
- **min-width** and **max-width**: Minimum and maximum width of the viewport.
- **min-height** and **max-height**: Minimum and maximum height of the viewport.
- **orientation**: Whether the device is in portrait or landscape mode (`portrait` or `landscape`).
- **aspect-ratio**: The aspect ratio of the viewport (e.g., `16 / 9`).
### Logical Operators
You can combine multiple conditions using logical operators:
- **and**: All conditions must be true.
- **or**: At least one condition must be true.
- **not**: Inverts the result of a single condition.
## Examples
Let's dive into some practical examples to illustrate how media queries work.
### Example 1: Basic Responsive Layout
Suppose you have a simple webpage with a header, main content area, and footer. You want the layout to change based on the screen width.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header, main, footer {
padding: 20px;
text-align: center;
}
header {
background-color: #4CAF50;
color: white;
}
main {
background-color: #f1f1f1;
}
footer {
background-color: #333;
color: white;
}
/* Media query for screens smaller than 600px */
@media (max-width: 600px) {
header, main, footer {
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<p>Welcome to my responsive website!</p>
</main>
<footer>
<p>Contact us at contact@example.com</p>
</footer>
</body>
</html>
In this example, when the screen width is less than or equal to 600 pixels, the padding of the header, main content area, and footer is reduced to 10 pixels. This makes the layout more compact and suitable for smaller screens.
You might also want to adjust font sizes based on screen size to ensure readability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Size</title>
<style>
body {
font-size: 16px;
}
/* Media query for screens smaller than 400px */
@media (max-width: 400px) {
body {
font-size: 14px;
}
}
/* Media query for screens larger than 800px */
@media (min-width: 800px) {
body {
font-size: 18px;
}
}
</style>
</head>
<body>
<p>This text will change size based on the screen width.</p>
</body>
</html>
Here, the font size is set to 14 pixels for screens smaller than 400 pixels and 18 pixels for screens larger than 800 pixels. For all other screen sizes, it remains at 16 pixels.
You can combine multiple conditions using logical operators to create more complex layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Media Query</title>
<style>
body {
background-color: lightblue;
}
/* Media query for screens wider than 600px and in landscape orientation */
@media (min-width: 600px) and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
/* Media query for screens taller than 600px or with a width-to-height ratio of at least 1.5 */
@media (min-height: 600px), (aspect-ratio: 1.5 / 1) {
body {
background-color: lightcoral;
}
}
/* Media query for screens that are not in portrait orientation */
@media not (orientation: portrait) {
body {
background-color: lightyellow;
}
}
</style>
</head>
<body>
<p>The background color changes based on the screen size and orientation.</p>
</body>
</html>
In this example, the background color changes depending on various conditions. The use of logical operators allows for more precise control over how styles are applied.
Now that you have a good understanding of CSS Media Queries, it's time to explore other aspects of responsive design. In the next section, we will dive into HTML Lists and learn how to create and style ordered and unordered lists to enhance your web pages.
By mastering media queries and responsive design techniques, you'll be well on your way to creating websites that are not only visually appealing but also functional across all devices.