Module 20 : This module focuses on CSS Media Queries, an essential tool for building responsive web designs that adapt to different screen sizes, devices, and orientations. You'll learn the fundamentals of media queries, how to apply them effectively, and how to test and refine your responsive designs.
By the end of this module, you will:
Understand what media queries are and how they work.
Learn how to apply breakpoints effectively for different screen sizes.
Explore advanced media query techniques for device adaptation.
Work on practical exercises and lab experiments to reinforce your learning.
1. Introduction to Responsive Design & Media Queries
What is Responsive Design?
Responsive design is an approach that ensures web pages look good on all devices, including desktops, tablets, and mobile phones. It uses fluid grids, flexible images, and media queries to achieve this adaptability.
What are Media Queries?
Media queries are a CSS technique introduced in CSS3 that allow developers to apply different styles depending on the characteristics of the user's device, such as:
Screen width (e.g., mobile vs. desktop)
Screen height
Resolution (e.g., high DPI displays)
Orientation (landscape vs. portrait)
Aspect ratio
2. Basic Syntax of Media Queries
A media query consists of:
@media keyword
A media type (e.g., screen, print)
One or more expressions (conditions to be met)
Example of Basic Media Query:
body {
background-color: white;
}
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
Explanation:
The default body background color is white.
When the screen width is 768px or smaller, the background changes to light blue.
3. Types of Media Queries and Breakpoints
3.1. Media Types
Media queries can target different media types:
screen → For devices with screens (e.g., desktops, tablets, mobiles).
print → For printed documents.
all → Applies to all media types.
Example:
@media print {
body {
font-size: 14px;
}
}
This applies only when the page is printed.
3.2. Common Breakpoints
Breakpoints define where the design should change. While there's no universal standard, common breakpoints are:
Device Type Width Range
Small Phones 320px – 480px
Tablets 481px – 768px
Laptops 769px – 1024px
Desktops 1025px – 1440px+
Example using breakpoints:
/* Default styles (for desktop) */
body {
font-size: 18px;
}
/* Tablet styles */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
/* Mobile styles */
@media (max-width: 480px) {
body {
font-size: 14px;
}
}
Explanation:
Default: font-size is 18px for large screens.
Tablets (≤768px): The font size reduces to 16px.
Mobile (≤480px): The font size further reduces to 14px.
4. Combining Multiple Conditions in Media Queries
4.1. Combining Width and Orientation
You can combine multiple conditions using AND (and) and OR (,) operators.
Example: Targeting landscape tablets (width ≤ 768px & landscape mode)
@media (max-width: 768px) and (orientation: landscape) {
body {
background-color: yellow;
}
}
This applies a yellow background only when the screen is ≤768px and in landscape mode.
4.2. Using Multiple Conditions (OR Operator)
You can apply styles for multiple conditions using a comma (,).
Example: Different styles for both mobile and tablet
@media (max-width: 480px), (max-width: 768px) {
body {
background-color: pink;
}
}
This applies a pink background for both mobiles and tablets.
5. Advanced Media Query Techniques
5.1. Dark Mode Support
Many modern devices support dark mode. Use the prefers-color-scheme media query to detect it.
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
Explanation:
If the user has dark mode enabled, the background turns black and text turns white.
5.2. High-Resolution (Retina) Displays
To target high-DPI screens (e.g., Retina displays), use min-resolution.
@media (min-resolution: 192dpi) {
img {
width: 100%;
}
}
This ensures images are properly displayed on high-resolution screens.
6. Practical Exercises and Lab Experiments
Exercise 1: Build a Responsive Navigation Menu
Objective: Create a navigation bar that changes layout on smaller screens.
Steps:
Create an HTML file with a <nav> element.
Apply default CSS for desktop layout.
Use media queries to create a mobile-friendly menu (e.g., hamburger menu).
/* Default navigation */
nav ul {
display: flex;
list-style: none;
gap: 20px;
}
/* Mobile-friendly menu */
@media (max-width: 600px) {
nav ul {
display: block;
text-align: center;
}
}
Exercise 2: Responsive Image Gallery
Objective: Design an image gallery that adjusts based on screen width.
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* Two columns for tablets */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
/* One column for mobile */
@media (max-width: 480px) {
.gallery {
grid-template-columns: repeat(1, 1fr);
}
}
Lab Experiment:
Load the page on different screen sizes and observe how the layout changes.
Use browser DevTools (Ctrl + Shift + M in Chrome) to simulate devices.
7. Testing and Debugging Media Queries
Tools for Testing
Browser Developer Tools – Resize window and use "Responsive Mode."
Online Testing Tools – Try tools like Google Mobile-Friendly Test.
Physical Devices – Test on actual smartphones and tablets.
Common Issues and Fixes
Issue Solution
Media query not working Check correct syntax & placement
Layout breaking at specific widths Adjust breakpoints
Overlapping styles Use min-width and max-width properly
Conclusion
Media queries are essential for creating responsive designs.
Use breakpoints wisely to ensure seamless user experiences.
Test on multiple devices to ensure consistency.
No comments:
Post a Comment