Шпаргалка адаптивності веб-сайту
Привіт:) У цьому пості зібрана інформація для швидкого забезпечення адаптивності веб-сайтів.
Основні ситуації на сайті
до змісту ↑Сітка медіазапитів (@media)
Найпопулярніші брейкпойнти веб-верстки.
/**
* https://getbootstrap.ru/docs/4.5/layout/overview/
*/
/* 320px - найменший девайс. Це гранична ширина екрану, під яку потрібно перевіряти верстку */
/* 991px - ширина планшетів */
/* == ВАРІАНТ 1 == */
/* Екстремальні девайси (портретні телефони, < 576px) */
/* Малі девайси (горизонтальні телефони, >= 576px) */
@media (min-width: 576px) {}
/* Середні девайси (планшети, >= 768px) */
@media (min-width: 768px) {}
/* Великі девайси (десктопи, >= 992px) */
@media (min-width: 992px) {}
/* Надвеликі девайси (великі десктопи, >= 1200px) */
@media (min-width: 1200px) {}
/* Мегавеликі девайси (великі десктопи, >=1400px) */
@media (min-width: 1400px) {}
/* == ВАРІАНТ 2 == */
/* Екстремальні девайси (телефони, < 576px) */
@media (max-width: 575.98px) {}
/* Малі девайси (горизонтальні телефони, < 768px) */
@media (max-width: 767.98px) {}
/* Середні девайси (планшети, < 992px) */
@media (max-width: 991.98px) {}
/* Великі девайси (великі десктопи, < 1200px) */
@media (max-width: 1199.98px) {}
/* Мегавеликі девайси (великі десктопи) */
/* Тут нема @media, так як такі брейкпойнти не мають верхньої межі по ширині width */
/* == ВАРІАНТ 3 == */
/* Екстремальні девайси (портретні телефони, < 576px) */
@media (max-width: 575.98px) {}
/* Малі девайси (горизонтальні телефони, >= 575px) */
@media (min-width: 576px) and (max-width: 767.98px) {}
/* Середні девайси (планшети, >= 768px) */
@media (min-width: 768px) and (max-width: 991.98px) {}
/* Великі девайси (десктопи, >= 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {}
/* Мегавеликі девайси (великі десктопи, >= 1200px) */
@media (min-width: 1200px) {}