Статьи

5 вариантов использования вертикальных медиа-запросов

Ноябрь 21, 2018

Медиа-запросы являются основной технологией Responsive Web Design, но, несмотря на множество вариантов, немногие из нас решаются выходить за рамки min-widthmax-width 

 /* mobile-first layout */
.column {
	width: 100%;
}

/* tablet layout */
@media (min-width: 50em) {
	.column {
		float: left;
		width: 50%;
	}
}

/* desktop layout */
@media (min-width: 75em) {
	.column {
		width: 33.33%;
	}
}

Несколько других свойств медиа-запроса требуются для общего использования:

  • widthheightdevice
  • resolutionpicturesrcset
  • colormonochrome
  • auralbraillehandheldprojectiontvscangrid
  • aspect-ratioorientation

Просмотрите ссылку на медиа-запрос в MDN.

Однако следует ли нам проявлять больше любви к свойствам min-heightmax-height Если мы рассмотрим только min-widthmax-width Есть несколько ситуаций, когда вертикальные медиа-запросы могут быть полезны …

1. Управление фиксированными элементами

У вашего значка гамбургера есть собственная фиксированная панель навигации вверху экрана? Возможно, это всего лишь 50 пикселей, но это может быть 10% экрана на меньшем устройстве или в горизонтальной ориентации. Пользователю потребуется больше прокрутки, и его будет сложнее использовать. Поэтому рекомендуется устанавливать планку только тогда, когда высота становится практичной, например, 

 /* static nav bar */
nav {
	width: 100%;
	height: 50px;
	color: #fff;
	background-color: #333;
}

/* fixed nav bar */
@media (min-height: 800px) {
	body {
		padding-top: 75px;
	}

	nav {
		position: fixed;
		top: 0;
		left: 0;
	}
}

По общему признанию, это означает, что пользователи должны прокрутить назад к верхней части страницы, чтобы получить доступ к навигации. Для более длинных страниц рассмотрите менее навязчивый фиксированный элемент на маленьких экранах, например

настроить фиксированные элементы

2. Управление «The Fold»

Да, складка мертва . Сгиб не имеет отношения к разработчикам и дизайнерам; Здесь нет стандартного размера экрана, разрешения, хрома браузера или высоты окна. К сожалению, это не обязательно не имеет отношения к отдельным пользователям.

Рассмотрим заголовок веб-страницы, содержащий карусель высотой 600 пикселей. Любой, кто посещает эту страницу с аналогичными размерами браузера, может не осознавать, что содержание ниже — похоже, что страница аккуратно закончилась. Они могут пропустить важные призывы к действию или дополнительную информацию.

Трудно гарантировать, что фолд не затронет всех, но есть варианты. В этом примере на экранах под 500px будет показана карусель 600px в полный рост. Обрезанный элемент должен дать понять, что есть больше контента. От 500 до 800 пикселей, карусель уменьшается до 400 пикселей, поэтому пользователь может видеть больше контента ниже. При 800px карусель возвращается к 600px, но, опять же, можно увидеть дополнительный контент. 

 .carousel {
	width: 100%;
	height: 600px;
}

@media (min-height: 500px) {
	.carousel { height: 400px; }
}

@media (min-height: 800px) {
	.carousel { height: 600px; }
}

Этот метод вряд ли будет работать во всех ситуациях, но, по крайней мере, вы могли бы использовать вертикальные медиазапросы, чтобы кнопки вызова к действию всегда появлялись на экране без прокрутки.

3. Регулировка размеров шрифта и веса

Меньшие шрифты можно использовать на меньших экранах. Это не должно уменьшать разборчивость, потому что устройство обычно держат ближе, чем монитор.

Даже если вы решите не изменять основной текст, эти большие заголовки размером 24 пикселя почти наверняка будут сокращены. Это уменьшит требуемую прокрутку и особенно полезно, когда пользователь держит свое устройство в горизонтальной ориентации.

4. Регулировка высоты линий и полей

Точно так же интервал между текстами может быть меньше на маленьких экранах. Например: 

 h1 {
	font-size: 1.25rem;
	font-weight: normal;
	line-height: 1.2;
	margin: 1em 0 0 0;
}

p {
	font-size: 0.75rem;
	line-height: 1.2;
	margin: 0 0 1em 0;
}

@media (min-height: 50em) {

	h1 {
		font-size: 2rem;
		font-weight: bold;
		margin: 1.5em 0 0.5em 0;
	}

	p {
		font-size: 1rem;
		line-height: 1.5;
	}

}

5. Настройка видимости контента

На экранах меньшей высоты вы можете сделать контент «необязательным». Возможно, вы могли бы реализовать аккордеон для некоторых разделов или блоков вопросов / ответов. На больших высотах весь контент может стать видимым, не нажимая сначала на заголовок.

Тем не менее, будьте осторожны с полным сокрытием контента. Если виджет или функция бесполезна для кого-то, использующего устройство меньшего размера, почему необходимо показывать его на большом экране?

Хотя min-heightmax-heightmin-widthmax-width

35
Share: