Assignments Of Class 18: Responsive Design - Media Queries
Assignment 1: Basic Media Query for Mobile Devices
Objective:
Create a simple webpage that uses a media query to adjust the layout for mobile devices.
Instructions:
1. Create an HTML page with a header and a paragraph.
2. Use a media query to reduce the font size and change the layout for mobile screens (max-width 600px).
Solution:
1. HTML 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>Mobile Responsive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Design</h1>
</header>
<main>
<p>This page adjusts based on the device screen size.</p>
</main>
</body>
</html>
2. CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
padding: 20px;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
p {
font-size: 18px;
}
/* Media Query for mobile devices */
@media (max-width: 600px) {
p {
font-size: 14px;
}
header {
background-color: #555;
}
}
Explanation:
- On larger screens, the font size of the paragraph is 18px, and the header has a dark background.
- For screens with a width of 600px or less, the font size reduces to 14px, and the header background changes to a lighter shade.
Assignment 2: Adjusting Layout for Tablets
Objective:
Create a webpage with a two-column layout that changes to a single column on tablet devices (between 601px and 1024px).
Solution:
1. HTML 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>Tablet Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Design - Tablet Layout</h1>
</header>
<div class="content">
<div class="column">
<p>This is the left column.</p>
</div>
<div class="column">
<p>This is the right column.</p>
</div>
</div>
</body>
</html>
2. CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.content {
display: flex;
justify-content: space-between;
}
.column {
width: 45%;
background-color: #f4f4f4;
padding: 10px;
}
@media (max-width: 1024px) {
.content {
flex-direction: column;
}
.column {
width: 100%;
margin-bottom: 10px;
}
}
Explanation:
- On larger screens, the two columns are displayed side by side with 45% width.
- On tablet devices (screen width between 601px and 1024px), the layout changes to a single column where each div takes up 100% width.
Assignment 3: Font Size Adjustment for Mobile
Objective:
Create a webpage where the font size changes based on the device size using media queries.
Solution:
1. HTML 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>Font Size Adjustment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Font Size</h1>
</header>
<p>Resize the browser to see the font size adjust.</p>
</body>
</html>
2. CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
p {
font-size: 18px;
}
@media (max-width: 600px) {
p {
font-size: 14px;
}
}
Explanation:
- On larger screens, the paragraph text is 18px.
- For mobile devices (width ≤ 600px), the font size reduces to 14px.
Assignment 4: Changing Background Color Based on Screen Size
Objective:
Change the background color of the webpage based on the device's screen size using media queries.
Solution:
1. HTML 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>Background Color Change</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Background</h1>
</header>
<p>The background color changes based on the screen width.</p>
</body>
</html>
2. CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: lightblue;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
@media (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
@media (max-width: 600px) {
body {
background-color: lightcoral;
}
}
Explanation:
- The default background is light blue for larger screens.
- For tablet devices (screen width ≤ 1024px), the background becomes light green.
- For mobile devices (screen width ≤ 600px), the background turns light coral.
Assignment 5: Adjusting Navigation Layout for Mobile
Objective:
Create a responsive navigation bar that adjusts from a horizontal layout to a vertical layout on mobile screens.
Solution:
1. HTML 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 Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
</body>
</html>
2. CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
}
nav {
display: flex;
justify-content: space-around;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
/* Media Query for mobile devices */
@media (max-width: 600px) {
nav {
flex-direction: column;
align-items: center;
}
nav a {
padding: 15px;
}
}
Explanation:
- On larger screens, the navigation items are displayed in a row using flexbox.
- On mobile devices (screen width ≤ 600px), the navigation changes to a vertical layout where each link is centered and stacked.
Assignment 6: Responsive Footer Layout
Objective:
Create a footer that adjusts its layout and text size based on screen size.
Solution:
1. HTML 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 Footer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<footer>
<p>Footer Text - © 2024</p>
</footer>
</body>
</html>
2. CSS (style.css):
css
Copy code
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
footer p {
font-size: 18px;
}
/* Media Query for mobile devices */
@media (max-width: 600px) {
footer p {
font-size: 14px;
}
}
Explanation:
- The footer text is 18px by default.
- On mobile devices (screen width ≤ 600px), the text size reduces to 14px.
Assignment 7: Adjusting Image Size for Mobile
Objective:
Create a webpage with an image that resizes based on the device's screen width.
Solution:
1. HTML 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 Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="example.jpg" alt="Responsive Image" />
</body>
</html>
2. CSS (style.css):
css
Copy code
img {
width: 100%;
height: auto;
}
@media (max-width: 600px) {
img {
width: 80%;
}
}
Explanation:
- The image takes up 100% of the screen width by default.
- On mobile devices (screen width ≤ 600px), the image width reduces to 80%.
Assignment 8: Creating a Grid Layout for Responsive Design
Objective:
Create a responsive grid layout that adjusts the number of columns based on screen size.
Solution:
1. HTML 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 Grid</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div 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>
</body>
</html>
2. CSS (style.css):
css
Copy code
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Explanation:
- By default, the grid has 4 equal-width columns.
- For tablets (screen width ≤ 768px), the grid adjusts to 2 columns.
- For mobile devices (screen width ≤ 600px), the grid switches to 1 column.
Assignment 9: Adding a Sticky Header on Scroll
Objective:
Create a webpage with a sticky header that remains at the top of the page when scrolling.
Solution:
1. HTML 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>Sticky Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Sticky Header</h1>
</header>
<main>
<p>Scroll down to see the sticky header in action.</p>
<!-- Add more content to scroll -->
</main>
</body>
</html>
2. CSS (style.css):
css
Copy code
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
main {
height: 2000px;
}
Explanation:
- The position: sticky property makes the header stick to the top of the screen when scrolling.
- The top: 0 ensures it sticks at the top.
Assignment 10: Hiding Elements on Mobile Devices
Objective:
Create a webpage where certain elements are hidden on mobile devices using media queries.
Solution:
1. HTML 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>Hide Elements on Mobile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="visible-element">
<p>This element is visible on larger screens.</p>
</div>
<div class="hidden-element">
<p>This element will be hidden on mobile screens.</p>
</div>
</body>
</html>
2. CSS (style.css):
css
Copy code
.hidden-element {
display: block;
}
@media (max-width: 600px) {
.hidden-element {
display: none;
}
}
Explanation:
- The .hidden-element is visible by default.
- For mobile devices (screen width ≤ 600px), the element is hidden using display: none;.
No comments:
Post a Comment