• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Responsive

← Previous Next →

🔹 What is Responsive Design?

Responsive web design ensures that your website looks good on all devices—desktops, tablets, and mobile phones—by automatically adjusting layout, content size, and appearance based on screen size.

🔹 Why is it Important?

  • Provides better user experience

  • Improves SEO ranking (Google prioritizes mobile-friendly sites)

  • Works on any screen size (mobile, tablet, laptop, desktop)

  • Saves development time by using a single codebase

🔹 Key Techniques for Responsive Design

✅ 1. Viewport Meta Tag

The first step in making a website responsive is setting the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 2. Responsive Images

Images should resize automatically based on screen size.

<img src="banner.jpg" alt="Banner" style="max-width:100%; height:auto;">
✅ 3. Percentage-Based Widths

Avoid fixed pixel sizes. Use percentages or relative units.

<div style="width: 50%;">This takes half of the screen width</div>
✅ 4. Media Queries

Media queries in CSS allow you to apply styles based on screen size.

/* Default for desktop */
body {
  background-color: lightblue;
}

/* For devices smaller than 768px */
@media only screen and (max-width: 768px) {
  body {
    background-color: lightgreen;
  }
}
✅ 5. Responsive Layouts with Flexbox or Grid

Flexbox makes it easy to create flexible layouts.

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 300px;
  margin: 10px;
}
✅ 6. Responsive Text

Use em, %, or vw for scalable text sizes.

h1 {
  font-size: 5vw; /* 5% of the viewport width */
}
✅ 7. Mobile-First Design

Start with styles for mobile and add media queries for larger screens.

/* Mobile styles */
body {
  font-size: 14px;
}

/* Tablets and up */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Practice Questions

Q1. Add a viewport meta tag to your HTML document.

Q2. Create an image that resizes based on screen width.

Q3. Build a layout using percentage-based width.

Q4. Use Flexbox to create a two-column layout that stacks on small screens.

Q5. Write a media query that changes the background color for screens smaller than 600px.

Q6. Design a heading with vw units so it scales with the screen.

Q7. Make a <div> take full width on mobile and 50% on desktop.

Q8. Create a mobile-first style sheet and override it for tablets.

Q9. Use max-width and height: auto to create responsive images.

Q10. Use media queries to hide an element on mobile view.

HTML Responsive Quiz

Q1: What is the purpose of the viewport meta tag?

A. To set screen resolution
B. To enable animations
C. To control layout scaling on mobile
D. To load faster

Q2: Which unit is best for responsive text size?

A. px
B. em
C. in
D. pt

Q3: What does max-width: 100% do to an image?

A. Fixes its size
B. Prevents resizing
C. Makes it scale with container
D. Hides it

Q4: Which CSS property helps in creating a flexible layout?

A. float
B. position
C. display: flex
D. z-index

Q5: What is the breakpoint for tablets in media queries?

A. 1024px
B. 768px
C. 640px
D. 320px

Q6: Which approach is best for modern responsive web design?

A. Fixed layout
B. Table layout
C. Mobile-first with media queries
D. Image maps

Q7: What happens without the viewport tag on mobile?

A. Zoomed-in layout
B. Page scales properly
C. Content looks normal
D. Page looks broken or tiny

Q8: Which tag helps with responsive images?

A. <scale>
B. <responsive>
C. <img> with max-width: 100%
D. <meta>

Q9: How do you hide content on mobile using media query?

A. display: none; inside @media (max-width: 600px)
B. visibility: hidden;
C. font-size: 0;
D. z-index: -1;

Q10: Which unit adjusts text based on the screen size?

A. px
B. pt
C. vw
D. cm
← Previous Next →
Login
Go Back Top