Lab 9 Responsive Website
Lab 9 Responsive Website
The viewport meta tag in HTML helps control how a webpage scales and displays on
different devices. It’s particularly useful for responsive design, ensuring that a website adjusts
to various screen sizes.
Here’s an example:
Explanation:
width=device-width: Sets the viewport width to match the device's screen width.
initial-scale=1.0: Sets the initial zoom level (1.0 means no zoom).
In responsive web design, the vw (viewport width) unit scales text relative to the width of the
viewport. For example, setting font-size: 5vw; makes the font size 5% of the viewport’s
width, allowing text to resize automatically across different screen sizes. This approach
ensures that text remains proportionally readable on both small and large screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Responsive text using viewport width */
h1 {
font-size: 5vw; /* Font size is 5% of the viewport width */
}
p {
font-size: 2vw; /* Font size is 2% of the viewport width */
}
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>This text resizes based on the viewport width.</p>
</body>
</html>
In this example:
The <h1> element's font size scales with 5vw, making it 5% of the viewport width.
The paragraph <p> scales with 2vw, keeping it proportional across devices.
CSS media queries allow you to apply different styles based on device characteristics like
screen width, height, orientation, and resolution. They’re key in creating responsive designs
that adjust layouts for different devices.
4. Responsive Images
To make images responsive, you can use CSS to ensure they scale appropriately across
different screen sizes. Here’s a simple approach:
img {
max-width: 100%;
height: auto;
}
This method allows images to resize automatically based on the screen width, ensuring they
fit properly on devices of all sizes.
Example:
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
flex: 1 1 50%;
}
6. Responsive Navigation
Responsive navigation adjusts based on screen size, offering a menu that can change between a
horizontal bar on desktops and a collapsible "hamburger" menu on mobile devices.
Objective:
Design a responsive portfolio webpage with the following features:
Steps:
1. HTML Structure:
o Create a header containing your name and a navigation bar.
o Add a sidebar with links to sections like About, Projects, and Contact.
o In the main area, include images (profile photo and project thumbnails) with
corresponding text.
o Add a footer with your contact details (email, phone).
2. CSS Styling:
o Use Flexbox or Grid for layout.
o Make the sidebar fixed on larger screens and collapsible for smaller screens
(hamburger menu).
o Set responsive text size using vw or em units.
o Ensure images scale properly on all screen sizes (use max-width: 100%).
3. Responsive Design:
o Use media queries to:
Stack the layout vertically on mobile (sidebar below header).
Ensure the images are resized and the text adjusts for readability.
Deliverables: