Responsive Design
Learn how to make your website adapt to different screen sizes.
1. Meta Viewport
The meta viewport ensures your website adapts to mobile screens.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Résultat attendu :
The page automatically adjusts to the width of the user's screen, making it responsive to various devices.
2. Media Queries
Adjust styles based on screen size.
@media (max-width: 768px) { body { font-size: 14px; } } @media (min-width: 769px) { body { font-size: 18px; } }
Résultat attendu :
On small screens (less than 768px), the font size is reduced to 14px. On larger screens, it is increased to 18px.
3. Flexbox
Flexbox ensures elements adjust and align dynamically.
.example { display: flex; flex-wrap: wrap; justify-content: space-around; } .item { padding: 1rem; text-align: center; border-radius: 5px; }
4. Grid Layout
Grid automatically adjusts the number of columns based on available space.
.example { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; } .item { padding: 1rem; text-align: center; border-radius: 5px; }
5. Responsive Images
Images adapt to their container's width.
/* CSS for Responsive Images */ img { max-width: 100%; height: auto; }
Résultat attendu :
6. Responsive Typography
Font size adapts to screen size using media queries.
/* Responsive Typography */ body { font-size: 14px; } @media (min-width: 768px) { body { font-size: 16px; } }
Résultat attendu :
Resize the browser to see the font size change.
7. Mobile-First Design
Design for smaller screens first and scale up.
/* Mobile-first */ body { font-size: 14px; } @media (min-width: 768px) { body { font-size: 16px; } }
Résultat attendu :
The font size starts small and increases as the screen size grows.
8. Responsive Navigation
Navigation adjusts for small and large screens.
/* Responsive Navigation */ .nav-link { display: block; text-align: center; } @media (min-width: 768px) { .nav-link { display: inline-block; text-align: left; } }
9. Frameworks
Use frameworks like Bootstrap and Tailwind CSS for pre-designed responsive utilities.
10. Relative Units
Use relative units like `rem`, `em`, `%`, `vw`, and `vh` for scalability.
/* CSS for Relative Units */ .container { font-size: 1rem; /* Base font size */ margin: 5%; /* 5% of the container's width */ padding: 2rem; /* 2 times the root font size */ width: 50%; /* Half the width of the parent */ background-color: #f8f9fa; height: 50vh; /* 50% of the viewport height */ } .small-box { font-size: 1em; /* Relative to the container's font size */ padding: 1rem; background-color: lightblue; height: 20%; width: 80%; margin: auto; }
Résultat attendu :
This container uses relative units for scalable design.
11. Viewport Units
Viewport units (`vw`, `vh`, `vmin`, `vmax`) allow elements to scale based on the size of the viewport.
/* CSS for Viewport Units */ h1 { font-size: 5vw; /* Font size will be 5% of the viewport width */ } .container { height: 50vh; /* Height is 50% of the viewport height */ width: 50vw; /* Width is 50% of the viewport width */ background-color: lightcoral; }
Résultat attendu :
Viewport Example
12. Responsive Background Images
Use `background-size: cover` or `contain` to ensure the background adapts to different screen sizes.
/* CSS for Responsive Background Images */ .container { background-image: url("https://via.placeholder.com/800x400"); background-size: cover; /* Ensures the image covers the container */ background-position: center; height: 300px; width: 100%; }
Résultat attendu :
13. Aspect Ratio
Maintain the aspect ratio of elements using the `aspect-ratio` property.
/* CSS for Aspect Ratio */ .container { aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */ background-color: lightblue; }
Résultat attendu :
14. Responsive Containers
Use percentage-based widths or `max-width` for responsive containers.
/* CSS for Responsive Containers */ .container { width: 100%; max-width: 1200px; margin: 0 auto; /* Center the container */ padding: 20px; background-color: #f8f9fa; }
Résultat attendu :
15. CSS Grid Auto-fit
Use `auto-fit` in CSS Grid to create responsive grids that adapt to available space.
/* CSS for Grid Auto-fit */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .item { padding: 1rem; background-color: lightgreen; text-align: center; border: 1px solid #ccc; border-radius: 5px; }