CSS Full Course Day 12 [Hindi] 💻 | Responsive Design (Media Queries & Units ) 🚀 | Mohit Decodes

📱 CSS Tutorial – Day 12: Responsive Design (Media Queries & Units)

Welcome to Day 12 of the CSS Full Course [Hindi] by Mohit Decodes! Today we focus on Responsive Web Design — making your websites look great on all devices using Media Queries and flexible CSS units.

🔹 What is Responsive Design?

Responsive design ensures your website adapts smoothly to different screen sizes — desktops, tablets, mobiles — for the best user experience.

🔹 Media Queries

  1. Allow you to apply CSS rules conditionally based on device characteristics like width, height, resolution, orientation, etc.
  2. Basic syntax:
css
CopyEdit
@media only screen and (max-width: 768px) {
/* CSS rules for devices with width 768px or less */
body {
background-color: lightgray;
}
}

🔹 Common Media Query Breakpoints

Device TypeWidth Range (px)
Mobileup to 480
Tablet481 – 768
Desktop769 and above


🔹 CSS Units for Responsiveness

  1. Absolute units: px (pixels) — fixed size
  2. Relative units: em, rem — relative to font size
  3. Viewport units: vw (viewport width), vh (viewport height) — relative to screen size
  4. Use relative and viewport units for fluid layouts

⚙️ Example CSS:

css
CopyEdit
.container {
width: 80vw;
padding: 1rem;
}

@media only screen and (max-width: 600px) {
.container {
width: 95vw;
padding: 0.5rem;
}
}

💡 Tips:

  1. Start with a mobile-first approach — design for small screens first
  2. Use media queries to adjust layouts, font sizes, and visibility
  3. Combine units like rem and vw for flexible sizing