Responsive | Adaptive | |
Description | Responsive web design means creating websites that look good on all devices! Responsive web design automatically adapts to different screen sizes and viewing angles. | Adaptable Web Design (AWD) creates different versions of a website that adapt to the user’s device, as opposed to a single page that changes its content or size according to the screen. |
Example | Example 1: | Example 2: |
Link | Homepage |
Example 1 (Responsive):
/* Стиль для больших экранов */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* Для экранов до 768px */
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/* Для экранов до 480px */
@media screen and (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
Example 2 (Adaptive):
/* Для десктопов */
.container {
display: flex;
justify-content: space-between;
}
/* Для экранов до 768px */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
Summary:
In my opinion, Adaptive Design is a better choice because there are more options for mobile devices. It allows you to create special versions of your website for different screens, which makes the interface more convenient and faster. For example, the phone can use a simplified layout with large buttons and smaller images, which improves the user experience and speeds up loading. The responsive design allows you to tailor the website to any device, offering convenience and functionality. I made my website in an adaptive format