Media queries are a fundamental part of responsive web design. They allow you to apply specific styles to different devices or screen sizes, ensuring that your website looks good and functions well on any device.
How Media Queries Work
Media queries use the @media rule to define conditions under which certain CSS rules should be applied. These conditions can include the width, height, orientation, resolution, and other characteristics of the viewport or device.
Basic Syntax of Media Queries
css code@media (condition) {
/* CSS rules to apply when the condition is true */
}
Common Media Query Examples
Here are some examples of how you can use media queries to create a responsive design:
Example 1: Basic Media Query for Different Screen Sizes
Let's create a simple responsive layout that adjusts the style of a web page based on screen width.
html code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Responsive Website</h1>
</header>
<main>
<p>This is a simple example of using media queries to create a responsive design.</p>
</main>
<footer>
<p>Footer content here</p>
</footer>
</body>
</html>
css code/* styles.css */
/* Default styles for all screen sizes */
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f9;
}
/* Media query for screens smaller than 768px (mobile devices) */
@media (max-width: 768px) {
body {
padding: 10px;
}
header, footer {
padding: 15px 0;
}
main {
padding: 15px;
}
}
/* Media query for screens larger than 768px (tablets and desktops) */
@media (min-width: 769px) {
main {
padding: 40px;
}
}
Example 2: Changing Layout with Media Queries
Let's create a responsive grid layout that changes the number of columns based on screen size.
html code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Example</title>
<link rel="stylesheet" href="grid-styles.css">
</head>
<body>
<header>
<h1>Responsive Grid Layout</h1>
</header>
<main class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</main>
<footer>
<p>Footer content here</p>
</footer>
</body>
</html>
css code/* grid-styles.css */
/* Default styles for all screen sizes */
body {
font-family: Arial, sans-serif;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
/* Media query for screens larger than 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* Media query for screens larger than 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
Explanation
- Default Styles: Set up a single-column layout for all screen sizes as the default style.
- Media Queries:
- At a minimum width of 600px, the layout changes to a two-column grid.
- At a minimum width of 900px, the layout changes to a three-column grid.
More Media Query Options
Orientation: Change styles based on the device's orientation.
css code@media (orientation: landscape) { /* Styles for landscape orientation */ }Resolution: Target high-resolution devices like retina displays.
css code@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Styles for high-resolution devices */ }Combining Conditions: Use
andandorto combine multiple conditions.css code@media (min-width: 600px) and (orientation: portrait) { /* Styles for portrait orientation and minimum width of 600px */ }
Conclusion
Media queries are a powerful tool for creating responsive web designs. They enable you to apply different styles to different devices, ensuring that your website is accessible and user-friendly on all screen sizes. By experimenting with media queries and responsive design techniques, you can build flexible, future-proof websites that provide a consistent user experience across all devices.
No comments:
Post a Comment