CSS Медиа запросы для основных типов экранов

09.09.2020

Памятка с медиа запросами для основных типов экранов.

Bootstrap 4.5 Grid

 
@media (max-width: 540px ) {
}

@media (min-width: 540px) and (max-width: 720px) {
}

@media (min-width: 720px) and (max-width: 960px) { 
}

@media (min-width: 1140px) {
}

Более гибкий вариант

 
/* Large desktops and laptops */
media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {

}

/* Landscape phones and smaller */
media (max-width: 480px) {

}

/* Small phones */
media (max-width: 320px) {

} 


Категории: CSS
Пометки: Медиа запросы (media queries)
Яндекс.Метрика