| Responsive | Adaptive |
| Responsive web design enables a web page’s design and layout to automatically adapt to any screen size. | Adaptive web design enables a web page to load a static, pre-made layout based on the detected device. |
| Responsive design entered the web design practice in 2010 when Ethan Marcotte introduced it at An Event Apart in Seattle. He explains what led him to name the new design approach: | Adaptive design has been permanently imprinted on the web design space, as companies increasingly want to control how their content appears on smartphones. |
| Consistent content experience across all platforms Works on new devices, even those with non-standard screen dimensions | Creates a perfectly-tailored experience for each platform and context High performing, as the design is optimized for the target device |
| Less control over how the site renders on each device Can hinder visual hierarchy if elements reflow in the wrong order or size | Can negatively impact SEO if content inconsistent across all devices |
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
#images {
flex-direction: column;
}
section {
width: 90%;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li a {
font-size: 1rem;
}
section h2 {
font-size: 1.2rem;
}
}
Index.html: https://romansandakov23.thkit.ee/index.html
The part responsible for responsiveness looks like this, it reduces elements on the site depending on the available pixels
Kokkuvõte: I believe that for users adaptive web design will be closer, because despite what device will go to the user, he will be able to comfortably interact with the site. Responsive design also has a place, perhaps it is easier and faster to write for programmers