Lecture Notes Of Class 18: Responsive Design - Media Queries
Objective:
Learn how to create responsive web designs using media queries. Responsive
design ensures that your webpage looks good on all devices, including desktops,
tablets, and mobile phones.
1.
Introduction to Responsive Design
Responsive web design (RWD) is an
approach to web design aimed at making web pages render well on a variety of
devices and window or screen sizes. In the past, websites were designed for a
specific screen size, usually that of a desktop monitor. However, with the rise
of mobile devices and tablets, web design must adapt to different screen sizes
and orientations.
Responsive design involves
flexible grids, flexible images, and the use of media queries to apply
different styles depending on the screen size or other characteristics of the
device.
2. What
are Media Queries?
A media query is a CSS
technique used to apply different styles to different devices based on their
characteristics like width, height, resolution, orientation, and others.
Media queries allow you to
specify a set of CSS rules that are applied only when certain conditions (media
features) are met. They are written in the CSS file and typically used to
create breakpoints—points where the design changes to better fit the screen
size.
Syntax:
css
Copy code
@media
(condition) {
/* CSS styles */
}
For example:
css
Copy code
@media (max-width:
600px) {
/* Styles for screens smaller than or equal
to 600px */
}
In this example, the styles
inside the @media rule will only apply if the screen width is 600px or less.
3. Common
Media Query Features
Media queries can use various
conditions, but the most common are:
- width:
The width of the viewport (the visible area of the web page on a screen).
- height:
The height of the viewport.
- max-width:
Specifies the maximum width of the viewport.
- min-width:
Specifies the minimum width of the viewport.
- orientation:
Whether the device is in portrait or landscape mode.
- resolution:
The screen resolution, typically used to target devices with
high-resolution displays, such as retina screens.
4.
Breakpoints for Mobile, Tablet, and Desktop
Breakpoints are specific widths
where the layout of the webpage will change to fit different screen sizes, such
as mobile, tablet, and desktop.
While these breakpoints can vary
depending on the design, here are some commonly used ones:
- Mobile:
Devices such as smartphones usually have screen widths of up to 600px.
css
Copy code
@media (max-width:
600px) {
/* Styles for mobile devices */
}
- Tablet:
Tablets typically have widths between 601px and 1024px.
css
Copy code
@media (min-width:
601px) and (max-width: 1024px) {
/* Styles for tablets */
}
- Desktop:
Desktops or larger screens have widths above 1024px.
css
Copy code
@media (min-width:
1025px) {
/* Styles for desktops */
}
5.
Example of Media Queries
Here’s an example of how you can
use media queries to create a simple responsive layout:
css
Copy code
/*
Default styles for large screens (desktop) */
body {
font-size: 16px;
background-color: #f0f0f0;
}
header {
display: flex;
justify-content: space-between;
padding: 20px;
}
/* For
screens smaller than 1025px (tablet and mobile) */
@media (max-width:
1024px) {
header {
flex-direction: column;
align-items: center;
}
body {
font-size: 14px;
}
}
/* For
screens smaller than 600px (mobile) */
@media (max-width:
600px) {
header {
text-align: center;
padding: 10px;
}
body {
font-size: 12px;
}
}
In this example:
- On
larger screens (desktop), the font size is 16px, and the header has a flex
layout with space between the items.
- On
tablets (screen width between 600px and 1024px), the header's layout
changes to a column, and the font size is reduced to 14px.
- On
mobile devices (screen width less than 600px), the header is centered, and
the font size is further reduced to 12px.
6. Lab
Exercise: Create a Responsive Webpage with Media Queries
In this lab exercise, you will
create a simple webpage and use media queries to make it responsive across
different devices.
Steps:
1. Create an
index.html file with basic HTML structure (e.g., header, main content, and
footer).
2. Style the
webpage with CSS to create a simple layout.
3. Add media
queries for mobile, tablet, and desktop breakpoints.
4. Test the
webpage on different screen sizes or use browser developer tools to simulate
different devices.
Example Structure:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Webpage</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Welcome to our site!</h2>
<p>This webpage adjusts
according to the device screen size.</p>
</section>
</main>
<footer>
<p>© 2024 Responsive
Webpage</p>
</footer>
</body>
</html>
CSS (style.css):
css
Copy code
/*
Default styles for large screens */
body {
font-family: Arial, sans-serif;
margin: 0;
padding:
0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
header h1
{
margin: 0;
font-size: 24px;
}
nav {
display: flex;
justify-content: flex-end;
}
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
/* For
screens smaller than 1025px (tablet and mobile) */
@media (max-width:
1024px) {
header {
text-align: center;
}
nav {
display: block;
margin-top: 10px;
}
nav a {
display: block;
margin: 5px 0;
}
}
/* For
screens smaller than 600px (mobile) */
@media (max-width:
600px) {
header h1 {
font-size: 20px;
}
footer {
font-size: 12px;
}
}
7.
Conclusion
Media queries are an essential
tool in responsive web design. By defining breakpoints and specifying different
styles for different screen sizes, you can ensure that your webpage looks great
on any device. By using media queries effectively, you can provide a better
user experience and ensure your website adapts to various device types, from
mobile phones to desktops.
Homework:
- Create
a responsive webpage with a navbar, content, and footer using media queries.
- Experiment
with different breakpoints and styles to see how your webpage adjusts on
mobile, tablet, and desktop.
No comments:
Post a Comment