Chapter 15CSS Tutorial~1 min read
CSS Media Queries
Responsive Design — Mobile, Tablet, Desktop
Media Queries म्हणजे screen size नुसार CSS styles बदलणे. Responsive web design चा foundation आहे — एकाच website ने mobile, tablet, आणि desktop वर छान दिसणे.
Media Query Syntax
Basic Media Query Syntax
css
@media media-type and (condition) {
/* CSS rules — condition true असेल तेव्हाच apply होतात */
}
/* media-type: screen (devices), print (printing) */
/* condition: max-width, min-width, orientation */Real Example — Mobile Responsive
Responsive Design — उदाहरण
css
/* Default styles — Desktop साठी */
.content {
background-color: lightyellow;
padding: 20px;
border-radius: 8px;
}
h1 { font-size: 48px; color: teal; }
p { font-size: 18px; color: #333; }
/* 600px किंवा कमी screen — Mobile साठी */
@media screen and (max-width: 600px) {
.content {
background-color: lightgreen; /* रंग बदलतो */
}
h1 { font-size: 24px; color: darkblue; } /* Smaller */
p { font-size: 14px; color: darkred; } /* Smaller */
}Common Breakpoints
Standard Breakpoints
css
/* Mobile — 600px पर्यंत */
@media screen and (max-width: 600px) { ... }
/* Tablet — 601px ते 900px */
@media screen and (min-width: 601px) and (max-width: 900px) { ... }
/* Desktop — 901px पेक्षा जास्त */
@media screen and (min-width: 901px) { ... }
/* Landscape mode */
@media screen and (orientation: landscape) { ... }Mobile First Approach
Mobile First — min-width वापरणे
css
/* Mobile First = पहिले mobile styles लिहा, मग larger screens साठी */
/* Default: Mobile styles */
.nav { flex-direction: column; }
.card-grid { grid-template-columns: 1fr; }
/* Tablet वर */
@media screen and (min-width: 768px) {
.nav { flex-direction: row; }
.card-grid { grid-template-columns: 1fr 1fr; }
}
/* Desktop वर */
@media screen and (min-width: 1024px) {
.card-grid { grid-template-columns: 1fr 1fr 1fr; }
}📌
HTML मध्ये <meta name="viewport" content="width=device-width, initial-scale=1.0"> हे नेहमी असणे गरजेचे आहे — नाहीतर mobile वर media queries काम करत नाहीत.
✅ Key Points — लक्षात ठेवा
- ▸@media screen and (max-width: 600px) — 600px किंवा कमी screen साठी
- ▸max-width = mobile साठी | min-width = desktop साठी
- ▸Mobile First approach = min-width breakpoints recommend केलेले
- ▸Common breakpoints: 600px (mobile), 768px (tablet), 1024px (desktop)
- ▸viewport meta tag HTML मध्ये नेहमी असणे mandatory
0/16 chapters पूर्ण