Media Queries in CSS

CSS Media Queries & Responsive Design

Aaj ke digital world me har user ek hi device se internet use nahi karta. Koi mobile se browse karta hai, koi tablet se aur koi desktop ya laptop se. Isliye web developers ko ye ensure karna padta hai ki website har screen size par responsive aur user-friendly ho.

Yahi kaam CSS Media Queries aur Responsive Design ke through hota hai.

1. Introduction to Media Queries

Media Queries CSS ka ek feature hai jisse aap apni website ko alag-alag screen sizes aur devices ke liye customize kar sakte ho.

Syntax:

@media (condition) {
  /* CSS rules */
}

Example:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Agar screen ki width 600px se small hogi, toh background color change ho jaayega.

Use case:

• Mobile ke liye different layout
• Desktop ke liye wide layout
• Tablet ke liye medium layout

2. Mobile-first Design

Mobile-first approach ka matlab hai ki pehle website ko small screens (mobile) ke liye design karo, phir gradually usko large screens ke liye enhance karo.

Isme aap pehle default CSS likhte ho jo mobile ke liye hota hai, aur phir min-width media queries use karke desktop aur tablet ke liye design add karte ho.

Example:

/* Default: Mobile */
body {
  font-size: 14px;
}
/* Tablet and larger */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
/* Desktop */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

3. Breakpoints

Breakpoints wo specific screen sizes hote hain jahan par aapko layout mein changes karne padte hai.

Common breakpoints:

• Mobile (small screens): 0 – 600px
• Tablets: 601px – 900px
• Small desktops/laptops: 901px – 1200px
• Large desktops: 1200px+

Note: Aap apne project ke according custom breakpoints bhi bana sakte ho.

4. Responsive Typography & Images

1. Typography (Text Size)

• Responsive typography ka matlab hai ki text screen ke hisaab se automatically adjust ho.
• em, rem, vw aur clamp() units ka use karke aap scalable typography bana sakte ho.

Example:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Iska matlab h1 ka size 1.5rem se small nahi hoga aur 3rem se large nahi hoga, lekin beech me screen width ke hisaab se scale karega.

2. Responsive Images

• max-width: 100%; aur height: auto; lagakar images ko responsive banaya ja sakta hai.
• Isse image apne container ke size ke hisaab se adjust ho jaati hai.

Example:

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

5. CSS Units for Responsiveness (%, em, rem, vh, vw, clamp)

Responsive design banane ke liye CSS units ka sahi selection important hai:

• % (percentage): Parent container ke size ke according adjust hota hai.
• em: Current element ke font-size par based.
• rem: Root (HTML) font-size ke according adjust hota hai.
• vh (viewport height): Screen ki total height ka percentage.
• vw (viewport width): Screen ki total width ka percentage.
• clamp(min, preferred, max): Minimum, preferred aur maximum values ke beech me automatically scale karta hai.

Example:

.container {
  width: 80%;   /* responsive width */
  font-size: 1.2rem;
  height: 100vh;
}

Conclusion

• Media Queries allow karti hain ki aap apni website ko different devices par adjust kar sako.
• Mobile-first design sabse recommended approach hai modern responsive websites ke liye.
• Breakpoints decide karte hain ki kis point par layout change hoga.
• Responsive typography aur images ensure karte hain ki content har device par readable aur properly sized ho.
• Responsive CSS units jaise %, rem, vh, vw, aur clamp() flexibility dete hain.