Шпаргалка адаптивності веб-сайту

Привіт:) У цьому пості зібрана інформація для швидкого забезпечення адаптивності веб-сайтів.

Основні ситуації на сайті

до змісту ↑

Сітка медіазапитів (@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) {}

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *