1.4 KiB
Responsive Web Design – Notes
Responsive Web Design (RWD) is an approach to web development that ensures websites adapt smoothly to different screen sizes and devices such as mobiles, tablets, laptops, and desktops.
Why Responsive Design is Important
Users access websites from multiple devices. Improves user experience on small and large screens. Required for modern web applications. Helps in SEO and accessibility.
Viewport Meta Tag
The viewport controls the layout on mobile browsers.
width=device-width sets layout width equal to device width. initial-scale=1.0 ensures proper zoom level.Responsive Units
Instead of fixed units (px), responsive units are preferred: % → relative to parent em / rem → relative to font size vw / vh → viewport width & height
Example: .container { width: 90%; }
Media Queries
Media queries apply CSS based on screen size.
Syntax: @media (max-width: 768px) { body { background-color: lightgray; } }
Common breakpoints: Mobile: ≤ 480px Tablet: ≤ 768px Desktop: ≥ 1024px
Responsive Layout Techniques
Flexible widths Stacked layouts on small screens Scalable images using max-width: 100% Using Flexbox/Grid responsively (without deep layout complexity)
Best Practices
Mobile-first approach Test on different screen sizes Avoid fixed widths Keep layouts simple and readable