Что такое Responsive Design?

 1/* Мобильные устройства */
 2@media (max-width: 767px) {
 3  .container { width: 100%; }
 4}
 5
 6/* Планшеты */
 7@media (min-width: 768px) and (max-width: 1023px) {
 8  .container { width: 750px; }
 9}
10
11/* Десктопы */
12@media (min-width: 1024px) {
13  .container { width: 1200px; }
14}

 1/* Базовые стили для мобильных */
 2.container {
 3  width: 100%;
 4  padding: 15px;
 5}
 6
 7/* Стили для больших экранов */
 8@media (min-width: 768px) {
 9  .container {
10    max-width: 750px;
11    margin: 0 auto;
12  }
13}
14
15@media (min-width: 1200px) {
16  .container {
17    max-width: 1170px;
18  }
19}

 1.flex-container {
 2  display: flex;
 3  flex-wrap: wrap;
 4}
 5
 6.flex-item {
 7  flex: 1 1 300px; /* grow shrink basis */
 8  margin: 10px;
 9}
10
11@media (max-width: 768px) {
12  .flex-item {
13    flex: 1 1 100%;
14  }
15}

 1.grid-container {
 2  display: grid;
 3  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 4  gap: 20px;
 5}
 6
 7@media (max-width: 768px) {
 8  .grid-container {
 9    grid-template-columns: 1fr;
10  }
11}

1/* CSS */
2img {
3  max-width: 100%;
4  height: auto;
5}

1<!-- HTML с srcset -->
2<img src="small.jpg" 
3     srcset="small.jpg 480w, 
4             medium.jpg 800w, 
5             large.jpg 1200w"
6     sizes="(max-width: 480px) 100vw,
7            (max-width: 800px) 50vw,
8            25vw"
9     alt="Описание">