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

Question

[IDOL772]

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

На первой картинке показано разрешение 769px

На второй картинке показано разрешение 768px

На третьей картинки показано разрешение 767px

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

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

Мой код:

@media (max-width:  768px) {
	.main {
		display: none;
	}
}

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

Answer 1

[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;
  }
}

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


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

Comments

[IDOL772]

Спасибо огромное, очень помогли!