← All CSS Chapters
LoOPCode Home
10. Responsive Design
Media queries — mobile, tablet, desktop.
Is chapter me cover hoga:
Viewport idea
Media queries
Mobile first
Breakpoints
1. Media query
Screen width ke hisaab se styles badlo.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { background: #0d9488; color: white; padding: 20px; font-size: 1rem; border-radius: 12px; } @media (min-width: 600px) { .box { background: #3b82f6; font-size: 1.25rem; padding: 32px; } } </style> </head> <body> <div class="box">Resize preview / screen — color badlega (600px+).</div> </body> </html>
▶ Run Code
☐
Mark complete
← Grid
Transitions →