Day 10: Responsive Design – Introduction to Media Queries
👋 Namaskaram! Innu nammude session-il Responsive Design um Media Queries um kurichu padikkan pokunnu. Ithu nammalude website ellaa device-ilum nannayi display aavan sahayikkum.
🔹 1. Responsive Design Enthu?
Responsive Design ennu parayunnathu oru design technique aanu, athu oru website erine screen size-ukalkk oru pole display aakan vendi use cheyyunnathu. Adhanu vendi nammal:
- 📱 Flexible Grid Layouts
- 📱 Fluid Images
- 📱 Media Queries
🔹 2. Media Queries Enthu?
Media Queries ennu parayunnathu oru CSS feature aanu. Ithinte upayogam:
- 🎨 Screen Size (width & height)
- 🎨 Device Type (mobile, tablet, desktop)
- 🎨 Orientation (landscape, portrait)
Ithu upayogichu nammal different screen sizes-inu different styles apply cheyyam.
🔹 3. Basic Syntax of Media Queries
📌 Example – Basic Media Query
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
}
Above example-il screen width 600px-nu thazhe aayal background color light blue aakum.
🔹 4. Common Breakpoints
- 📏 Mobile Devices: max-width: 600px
- 📏 Tablets: max-width: 768px
- 📏 Laptops: max-width: 1024px
- 📏 Desktops: max-width: 1200px and above
🔹 5. Advanced Example – Responsive Layout
📌 Example – Responsive Grid
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 300px;
margin: 10px;
background: #3498db;
color: white;
padding: 20px;
}
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 300px;
margin: 10px;
background: #3498db;
color: white;
padding: 20px;
}
🔹 6. Benefits of Using Media Queries
- ✅ Better User Experience
- ✅ Improved Accessibility
- ✅ SEO Friendly
- ✅ Enhanced Performance
🎯 Conclusion
- 🔥 **Responsive Design** – Ensures compatibility with all devices
- 🔥 **Media Queries** – Apply styles based on screen size and device type
- 🔥 **Benefits** – Better UX, Accessibility, and SEO
📌 **Next Session:** Advanced Media Queries and Responsive Design Patterns – Don't miss it!