§ Responsive design или как да направим нашия уеб сайт работещ на различни устройства и резолюции

Responsive design е подход за проектиране на уеб приложения, който се фокусира към имплементации, които се адаптират към различни размери на екран и устройство. Това означава, че същият сайт ще се вижда и ше работи на различни устройства - без да е необходимо да се създават различни версии за десктоп, таблет или смартфон.

Responsive design е измислен, защото в последните години броят на устройствата, на които се достъпва интернет и уеб страниците, се увеличава многократно. Това подсказва, че съществува нужда за по-гъвкави и адаптивни начини за проектиране на уеб сайтове, които да работят правилно на всички тези устройства. Именно това се опитва да постигне responsive design - да се осигури по-добро преживяване на крайния потребител.

Един от начините да имплементирате responsive design с CSS е да използвате медийни заявки (media queries). Тези заявки позволяват да се задават различни стилове в зависимост от размера на екрана на устройството. Ето пример:

/* Стилове по подразбиране */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Стилове, които ще се прилагат, когато размерът на екрана е по-малък от 768px */
@media only screen and (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.2;
  }
}