• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

Responsive Web Design Intro

← Previous Next →

🔹 What is Responsive Web Design?

Responsive Web Design (RWD) is a web development approach that allows your website or web application to look good on all devices — desktops, laptops, tablets, and smartphones — without the need for separate mobile sites.

It uses flexible layouts, media queries, fluid grids, and responsive images to automatically adjust the layout based on screen size, orientation, and resolution.

🔸 Why is RWD Important?

  • ✔️ One website for all devices

  • ✔️ Better user experience on any screen

  • ✔️ Improved SEO (Google prioritizes mobile-friendly websites)

  • ✔️ No need for separate mobile versions

  • ✔️ Faster maintenance and cost-effective

🔸 Core Components of RWD

  1. Fluid Grid Layouts
    Uses relative units like % instead of fixed units like px.

    .container {
  width: 100%;
}

  2. Flexible Images
    Images scale within their parent containers using max-width.

    img {
  max-width: 100%;
  height: auto;
}

  3. Media Queries
    CSS rules that apply at specific screen sizes or conditions.

    @media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

🔸 Example of a Responsive Layout

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

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

.box {
  flex: 1 1 50%;
  padding: 20px;
}

@media (max-width: 600px) {
  .box {
    flex: 1 1 100%;
  }
}

📱 On desktop: 2 boxes side-by-side
📲 On mobile: Boxes stack vertically

Practice Questions

✅ Write CSS or HTML for the following:

Q1. Create a fluid layout using percentage widths.

Q2. Write media query for screens smaller than 768px.

Q3. Make an image scale within its container.

Q4. Stack two columns into one on smaller screens.

Q5. Make a button full-width only on mobile.

Q6. Use flex-wrap to wrap items responsively.

Q7. Set font-size to be smaller on mobile devices.

Q8. Hide a sidebar on screens less than 500px wide.

Q9. Align menu items horizontally and collapse into a menu icon on small screens.

Q10. Create a responsive three-column layout that becomes single-column on phones.

Responsive Web Design Intro Quiz

Q1: What is the goal of Responsive Web Design?

A. Increase loading time
B. Adapt layout to different screen sizes
C. Make fixed layouts
D. Remove mobile support

Q2: Which unit is commonly used in fluid layouts?

A. px
B. %
C. cm
D. em

Q3: Which CSS rule makes images scale with the container?

A. width: auto
B. max-width: 100%
C. position: relative
D. height: 100%

Q4: What does @media (max-width: 768px) mean?

A. Apply styles to screens 768px or smaller
B. Apply styles above 768px
C. Only for landscape mode
D. Only for tablets

Q5: Which is not a benefit of RWD?

A. Consistent user experience
B. Slower performance
C. Improved SEO
D. Lower maintenance cost

Q6: Which approach allows stacking columns on smaller screens?

A. float
B. flex-wrap: wrap
C. position: fixed
D. text-align: center

Q7: What is the purpose of viewport meta tag in HTML?

A. Controls layout scaling on mobile
B. Loads JavaScript
C. Adds animation
D. Enables dark mode

Q8: Which layout method is most popular for responsiveness?

A. position: absolute
B. Flexbox / Grid
C. Table layout
D. Inline-block

Q9: How do you hide an element on small screens only?

A. display: none;
B. @media (max-width: 500px) { .element { display: none; } }
C. hide: true
D. visibility: off

Q10: Which media feature detects device width?

A. device-mode
B. max-width
C. screen-type
D. screen-width
← Previous Next →
Login
Go Back Top