52 lines
1.4 KiB
Markdown
52 lines
1.4 KiB
Markdown
# 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 |