Вопрос по адаптиву от новичка?

Question

[Nick Krogan]

есть блок с фоновым изображением. медиа запрос

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.head {
		width: 100%;
		height: 57%;
		background-image: none;
	}

, но изображение исчезает при ширине в 846рх(эмуляция хром). как правильно отмерять брейкпоинты? "откуда" их высчитывать?

Comments

[Кирилл]

Может у вас просто при 846рх ширина становится больше высоты и уже медиавыражение не подходит под это условие "orientation : portrait"

[Nick Krogan]

Кирилл Кубляков: высота разве влияет? в условии запроса только о ширине ведь говориться

[Роман Романенко]

Nick Krogan: orientation Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

[Кирилл]

Nick Krogan: да, Роман Романенко правильно говорит)

[Ankhena]

На реальном девайсе не исчезнет, потому что он физически будет повернут в "портрет"

[Nick Krogan]

Роман Романенко: как тогда медиа прописать для адаптивности при обычном уменьшении окна браузера? аналогично с другими для десктопа? или лучше не надо?

[Anton fon Faust]

Nick Krogan: Уберите лишнее и не будете задаваться вопросами почему не работает. Чем проще - тем эффективнее.

Answer 1

[Алексей Голягин]

Попробуйте так:

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .head {
    width: 100%;
    height: 57%;
    background-image: none;
  }

Так же проверьте, может есть стили которые ниже этого правила, они перекрывают его