@IDOL772

Как правильно задать max-width и min-width?

Есть два блока. Первый - .main - для разрешения от 768 px включительно для компьютерной версии
Второй - .small-version - для разрешения от 0 px до 768 px
По назначению эти блока одинаковы.
611e49b2d0b60162336484.jpeg
На первой картинке показано разрешение 769px
611e49d7cff5b063225915.jpeg
На второй картинке показано разрешение 768px
611e49fe9c747174859421.jpeg
На третьей картинки показано разрешение 767px

Верстал я при помощи bootstrap.

Сам вопрос: Как сделать так, чтобы при разрешении 768px отображался .main, а при разрешении ниже - .small_version?

Мой код:
@media (max-width:  768px) {
	.main {
		display: none;
	}
}

@media (min-width: 768px){
	.small_version {
		display: none;
	}
}
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
Pavel-ww
@Pavel-ww
Вы смешали подходы desktop first и mobile first. Выберите один из них.
desktop first
.small_version {
    display: none;
 }
@media (max-width:  767px) {
  .main {
    display: none;
  }
 .small_version {
    display: block;
 }
}

mobile first
@media (min-width:  320px) {
 .main {
    display:  none;
  }
}
@media (min-width:  768px) {
  .main {
    display: block;
  }
 .small_version {
    display:  none;
 }
}

Можно конечно и смешивать, но если кода много возникнет путаница
@media (max-width:  767px) {
  .main {
    display: none;
  }
}

@media (min-width: 768px){
  .small_version {
    display: none;
  }
}

Разносите отдельно группы брейкпойнтов для разных подходов
611e517f84231459948664.jpeg

А вообще по возможности избегайте display: block/none; в точках остановки, так как код скрытого элемента по прежнему доступен браузерам и поисковикам. То есть по сути лишний код получается. Лучше стилизовать один и тот же элемент в точках остановки чем заменять другим.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы