Памятка с медиа запросами для основных типов экранов.
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) {
}