7GIT
@7GIT

Как правильно сделать медиа запрос для display:none?

Необходимо, скрыть блок на экранах ExtraSmall (cell-es) и Small (cell-s).
Если в html разметку добавляю классы cell-es cell-s, то все работает, но хотелось бы узнать:
1. Насколько правильно, я всё делаю?
2. Как составить запрос правильно по одному классу.

HTML: Разметка

<!--BEGIN [@Header/Top] Top-->
<div class="row__top">
	<div class="cell cell__top cell-s">
		<div class="main__top">
			<div class="top__item">left</div>
			<div class="top__item top__item--full">
				mid
			</div>
			<div class="top__item mr-0">right</div>
		</div>
	</div>
</div>
<!--END [@Header/Top] Top-->

CSS: Основные стили

.row__top {
	background: #ffde40;
}

.cell {
	
}

.cell__top {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1280px;
}

.main__top {
	display: flex;
	height: 56px;
	align-items: center;
}

.top__item--full {
	flex: auto;
	justify-content: center;
}

.top__item {
	display: flex;
	margin-right: 16px;
}


CSS: Мадиа запросы

/** BEGIN [@Media] **/
@media (max-width: 319px) {
	.cell {
		padding: 0 8px;
	}
	.cell-es {
		display: none;
	}
}

@media (min-width: 320px) and (max-width: 543px) {
	.cell {
		padding: 0 16px;
	}
	.cell-s {
		display: none;
	}
}

@media (min-width: 544px) and (max-width: 767px) {
	.cell {
		padding: 0 24px;
	}
	.cell-m {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1011px) {
	.cell {
		padding: 0 32px;
	}
	.cell-l {
		display: none;
	}
}

@media (min-width: 1012px) {
	.cell {
		padding: 0 48px;
	}
	.cell-el {
		display: none;
	}
}
/** END [@Media] **/


Демо: https://jsfiddle.net/AIDimov/onmqk74y/1/
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
/** BEGIN [@Media] **/
@media (max-width: 319px) {
  .cell {
    padding: 0 8px;
  }
  .cell-es {
    display: none;
  }
}

@mediagenia  (max-width: 543px) {
  .cell {
    padding: 0 16px;
  }
  .cell-s {
    display: none;
  }
}


Можно сделать так и тогда не нужно будет присваивать два класса что бы скрыть элемент на двух размерах
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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