# 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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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