Media orientation css: Ориентация — CSS | MDN — Программирование на Python и Objective-C в Mac OS

Содержание

Свойство «@ media screen and (orientation:landscape) » также допустимо для настольных компьютеров?

Недавно я поместил это свойство на отзывчивый сайт, который я делаю, но хотел бы, чтобы оно было действительным только для мобильных телефонов и, к моему удивлению, было также действительным для настольных компьютеров. Кто-нибудь знает, есть ли у пейзажей только сотовый телефон?

CSS

@media screen and (orientation:landscape) {
        width: 100%;
        overflow: hidden;
}

css

mobile

responsive-design

media-queries

Поделиться

Источник

cristiano matos

06 декабря 2013 в 14:31

3 ответа

Просто добавьте также максимальную ширину. Тогда это будет для мобильных устройств только в ландшафте. (Вы сможете уменьшить экран рабочего стола до этого размера, но кто действительно просматривает Интернет в windows мобильного размера)

@media screen and (orientation:landscape) and (max-width:480px) {
    width: 100%;
    overflow: hidden;
}

Поделиться

Michael Tempest

06 декабря 2013 в 14:36

Я не совсем уверен, как рассчитывается ориентация, но, похоже, она основана на разрешении окна. Попробуйте изменить размер дисплея на http://jsfiddle.net/fkyBA/ , и вы увидите, что фон красный в портретном стиле, но не в ландшафтном стиле. Я бы подумал, что такое поведение ожидаемо и даже полезно. Вы можете использовать orientation:portrait , если хотите, но обратите внимание, что это также влияет на настольные браузеры.

Я бы скорее принял такое поведение, чем сопротивлялся ему. Если у пользователя есть тонкое, высокое окно браузера, ему должно быть проще использовать ваш сайт с портретными стилями.

Поделиться

Explosion Pills

06 декабря 2013 в 14:42

Чтобы ответить прямо: нет никакого способа явно обнаружить мобильный телефон, используя только css

И по мере того, как мобильные браузеры и экраны становятся все более продвинутыми, становится все труднее определить разницу в вашем приложении даже с javascript.

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

попробуйте выполнить запросы max-width и max-height в дополнение к проверке ориентации и не фокусируйте свои стили на категории «mobile or desktop», но: «хорошо ли он выглядит при этом размере/ориентации и можно ли его использовать?»

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

EDIT: Однако, если вы решите, что вам REALLY абсолютно необходимо отображать что-то только для мобильного устройства, вы можете использовать modernizr и добавить стиль для сенсорных устройств.

Поделиться

Tim Seguine

06 декабря 2013 в 14:48

CSS — orientation — orientation CSS , функция медиа может быть использована для проверки ориентации

orientation CSS , функция медиа может быть использована для проверки ориентации видового экрана (или поля страницы, для страничных СМИ ).

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

Syntax

Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.

Значения ключевых слов

portrait: Видовой экран находится в портретной ориентации,т.е.высота больше или равна ширине.
landscape: Видовой экран находится в ландшафтной ориентации,т.е.ширина больше высоты.

Examples

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Result

Specifications

Совместимость с браузерами

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Хромовый Android	Firefox для Android	Опера Андроид	Safari на IOS	Samsung Интернет
`orientation`	3	12	2	9	10.6	5	≤37	18	4	11	4.2	1.0

translated-content/index.html at main · mdn/translated-content · GitHub

translated-content/index.html at main · mdn/translated-content · GitHub

Permalink

Cannot retrieve contributors at this time

	—
	title: Ориентация
	slug: Web/CSS/@media/orientation
	translation_of: Web/CSS/@media/orientation
	—
	<div>{{cssref}}</div>

	<p><a href=»/en-US/docs/CSS»>CSS</a> <a href=»/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features»>медиа-функции</a> <strong><code>orientation</code></strong> может использоваться для проверки ориентации области {{glossary(«просмотра»)}} (или поля страницы для <a href=»/en-US/docs/Web/CSS/Paged_media»>медийных страниц</a>).</p>

	<div>
	<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p>
	</div>

	<h3>Синтаксис</h3>

	<p>Функция <code>orientation</code> указывается в качестве значения ключевого слова, выбранного из списка ниже.</p>

	<h4>Значения ключевых слов</h4>

	<dl>
	<dt><code>portrait</code></dt>
	<dd>Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.</dd>
	<dt><code>landscape</code></dt>
	<dd>Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.</dd>
	</dl>

	<h3>Пример</h3>

	<h4>HTML</h4>

	<pre><div>Вставка 1</div>
	<div>Вставка 2</div>
	<div>Вставка 3</div>
	</pre>

	<h4>CSS</h4>

	<pre>body {
	display: flex;
	}

	div {
	background: yellow;
	}

	@media (orientation: landscape) {
	body {
	flex-direction: row;
	}
	}

	@media (orientation: portrait) {
	body {
	flex-direction: column;
	}
	}</pre>

	<h4>Результат</h4>

	<p>{{EmbedLiveSample(«Example»)}}</p>

	<h3>Характеристики</h3>

	<table>
	<thead>
	<tr>
	<th scope=»col»>Спецификация</th>
	<th scope=»col»>Статус</th>
	<th scope=»col»>Комментарий</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>{{SpecName(‘CSS4 Media Queries’, ‘#orientation’, ‘orientation’)}}</td>
	<td>{{Spec2(‘CSS4 Media Queries’)}}</td>
	<td>Бе изменений.</td>
	</tr>
	<tr>
	<td>{{SpecName(‘CSS3 Media Queries’, ‘#orientation’, ‘orientation’)}}</td>
	<td>{{Spec2(‘CSS3 Media Queries’)}}</td>
	<td>Начальное определение.</td>
	</tr>
	</tbody>
	</table>

	<h3>Совместимость браузеров</h3>



	<p>{{Compat(«css.at-rules.media.orientation»)}}</p>

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Условия CSS для разрешений экрана

В разработке современного дизайна большое внимание уделяется отображению сайта на различных устройствах: мониторах компьютера, планшетах, телефонах и других устройств, с которых возможен выход в интернет.

До недавнего времени, разработчикам и верстальщикам сайтов приходилось бороться с кроссбраузерностью — отображением сайта одинаково при просмотре сайта в различных браузерах : Opera, Mozilla, Google Chrome и конечно же, так нелюбимый всеми верстальщиками — Internet Explorer.

С внедрением в жизнь мобильных технологий и популяризацией мобильных устройств, у верстальщиков и разработчиков сайтов появилась новая проблема — правильное отображение сайта на различных мобильных устройствах, с различным разрешением экрана. Но на спасение разработчиков в CSS3 появилась замечательная возможность media queries — при помощи различных условий, задавать правила для определенной группы устройств, с различным разрешением. Ниже приведены все правила, при которых можно задать условия в СSS3 для определения ширины экрана, с которого просматривается сайт.

Список CSS условий определяющих ширину экрана

/* monitors and laptops */
@media screen and (min-width: 1240px) {}
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/* mobile */
@media screen and (max-width: 768px) {}
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){}
/* CSS для Retina устройств */
@media

only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min—moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {/* CSS */}

Надеемся, что эта информация была вам полезна в разработке вашего сайта и ваш сайт теперь отображается отлично на всех экранах и устройствах!

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

Пуленепробиваемые iOS медиа-выражения

Благодаря работе, проделанной компанией Apple, пользователи имеют превосходные интерфейсы, а разработчики экономят кучу времени, так как абсолютно любое устройство можно отличить от другого по Media Queries, тем самым создавая по-настоящему отзывчивые сайты.

iPhone 6 и iPhone 6+


/* iPhone 6 Портрет */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 Альбом */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Портрет */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ Альбом */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 и iPhone 6+ Портрет и Альбом */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}
/*iPhone 6 и iPhone 6+ Портрет */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 и iPhone 6+ Альбом */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}

Retina iPad в портретной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) 
{  
// CSS Styles
}

Retina iPad в альбомной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) 
{ 
// CSS Styles
}

Retina iPad в портретной и альбомной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) 
{ 
// CSS Styles
}

iPad в портретной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
{  
// CSS Styles
}

iPad в альбомной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
// CSS Styles
}

iPad в портретной и альбомной ориентации


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
{ 
// CSS Styles
}

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Linkedin

Telegram

WhatsApp

Поделиться

CSS CSS3 HTML5 JavaScript Media Queries

Используем медиа запросы CSS3 для определения ориентации экрана

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

Ориентация

Медиа запрос ориентации позволяет использовать определённые стили для разных ориентаций экрана. Доступны две опции: landscape и portrait, которые используются для изменения шаблона страницы на основе ориентации экрана браузера.

Браузер или устройство определяет ориентацию страницы по высоте и ширине окна. Если высота больше ширины — используется режим портретной ориентации. Если ширина больше высоты — режим ландшафтной ориентации.

/* Портретная ориентация шаблона */
@media screen and (orientation:portrait) {
    /* Стили для портретной ориентации шаблона */
}
/* Ландшафтная ориентация шаблона*/
@media screen and (orientation:landscape) {
    /* Стили для ландшафтной ориентации шаблона */
}

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

Демонстрация с хамелеоном

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

Как устроена демонстрация

Рассмотрим внутренне устройство демонстрационной страницы.

html { background: #000 url(chameleon2.jpg) 50% 100% no-repeat; }
body { background: url(chameleon.jpg) 50% 100% no-repeat; }

Она состоит из двух изображений хамелеона. Одно — для ландшафтной ориентации страницы, другое — для портретной. Первое изображение используется как фон для тега html, а второе — для тега body.

/* Портретная ориентация*/
@media screen and (orientation:portrait) {
    body { opacity: 1; }
}
/* Ландшафтная ориентация*/
@media screen and (orientation:landscape) {
    body { opacity: 0; }
}

Для переключения изображений тег body имеет непрозрачность 0 при ландшафтной ориентации и 1 при портретной ориентации.

Затухание при смене цвета

В браузерах , поддерживающих трансформации CSS3, смена ориентации сопровождается плавным затуханием цвета хамелеона.

body {
    background: url(chameleon.jpg) 50% 100% no-repeat;
    -moz-transition: opacity 1s ease;  /* FF3.7+ */
    -o-transition: opacity 1s ease;  /* Opera 10.5 */
    -webkit-transition: opacity 1s ease;  /* Saf3.2+, Chrome */
    transition: opacity 1s ease;
}

Поддержка браузерами

Медиа запросы по-разному поддерживаются различными браузерами, но определение ориентации работает хорошо в следующих браузерах:

Safari 4+
Chrome 4+
Firefox 3.5+
Safari iPad

К сожалению Opera 10.5 (Presto 2.5) поддерживает все медиа запросы кроме ориентации.

Бонус: поддержка iPhone

Программное обеспечение iPhone не поддерживает медиа запрос ориентации, а для iPad релиз версии 4.0 отлично работает с ним.

Мы можем имитировать определение ориентации для iPhone с помощью медиа запросов min- и max-width, которые доступны в версиях начиная с 1.0.

/* Портретная ориентация */
@media screen and (max-width: 320px) {
    body { opacity: 1; }
}
/* Ландшафтная ориентация */
@media screen and (min-width: 321px) and (max-width: 480px) {
    body { opacity: 0; }
}

Так как известно, что максимальная ширина экрана iPhone в режиме портретной ориентации составляет 320px, то мы используем данный факт. Для определения ландшафтной ориентации используется комбинация запросов min/max-width, которая доступна в CSS3. Свойство max-width позволяет избежать неприятных моментов для настольных систем.

Чтобы данные стили работали в iPhone нужно также использовать мета тег viewport:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Так iPhone будет выводить страницу в действительном масштабе, а не изменять автоматически размер для соответствия разрешению экрана.

Теперь фоновое изображение слишком большое

Использование данного тега приводит к том, что фоновое изображение выводится слишком большим для размеров iPhone. к счастью, есть свойство CSS3 background-size, которое поддерживается iPhone.

@media screen and (max-device-width: 480px) {
    html, body {
        -moz-background-size: 80% auto;
        -webkit-background-size: 80% auto;
        background-size: 80% auto;
    }
}

Для того, чтобы использовать уменьшение фона с помощью свойства background-size для маленьких экранов, мы задействуем медиа запрос max-device-width, чтобы ограничить область применения масштабирования максимальной шириной экрана в 480px. Затем для тегов html и body мы устанавливаем ширину фона 80% от доступного пространства, а высота будет выставляться автоматически для сохранения пропорций изображения.

Но здесь есть другой момент

Изменение ориентации iPhone, также изменяет размер фонового изображения. Получается, что в ландшафтном режиме фоновое изображение больше, чем в портретном режиме. Для выравнивания размеров изображений мы используем свойство background-size для ландшафтного режима.

@media screen and (min-width: 321px) and (max-width: 480px) {
    html, body {
        -moz-background-size: 50% auto;
        -webkit-background-size: 50% auto;
        background-size: 50% auto;
    }
    body { opacity: 0; }
}

Заключение

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

Css медиа запросы для ipad и iphone. Шпаргалка для разработчиков — IT портал

Сколько раз вам приходилось разрабатывать продукт под определенные устройства? Лично мне не однократно, не всегда, для такой работы подходят типичные css медиа запросы. Поэтому мы решили составить шпаргалку для дизайнеров и разработчиков которые создают сайты и приложение под apple устройства такие как iPad и iPhone.

iPad медиа запросы

iPad в portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){ /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px){ /* STYLES GO HERE */ }

iPad в landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){ /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape){ /* STYLES GO HERE */ }

iPad в portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 и 4 медиа запросы

Следующие медиа запросы будут работать для устройств 3-го или 4-го поколения с retina дисплеем

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 6 в portrait

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 2G-4S в portrait и landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) { /* STYLES GO HERE */}

iPhone 2G-4S в landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 2G-4S в portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : portrait) { /* STYLES GO HERE */ }

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

Источник

Управление ориентацией экрана — веб-API

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

Есть несколько способов управления ориентацией экрана, как с помощью CSS, так и JavaScript.Первый — это медиа-запрос ориентации. Это позволяет контенту настраивать макет с помощью CSS в зависимости от того, находится ли окно браузера в альбомном режиме (то есть его ширина больше, чем его высота) или в портретном режиме (его высота больше, чем его ширина).

Второй способ — это API ориентации экрана JavaScript, который можно использовать для получения текущей ориентации самого экрана и, в конечном итоге, его блокировки.

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

Давайте рассмотрим пример со следующим HTML-кодом

  
   А 
   Б 
   В 


 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. В ac est dolor, quis tincidunt leo.Cras Commodo Quam Non Tortor Conctetur Eget Rutrum Dolor Ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.

CSS полагается на медиа-запрос ориентации для обработки определенных стилей в зависимости от ориентации экрана

 

html, body {
  ширина: 100%;
  высота: 100%;
}

тело {
  граница: сплошной черный 1px;

  -moz-box-sizing: рамка-рамка;
  размер коробки: рамка-рамка;
}

п {
  шрифт: 1em без засечек;
  маржа: 0;
  заполнение: .5em;
}

ul {
  стиль списка: нет;

  шрифт: 1em моноширинный;
  маржа: 0;
  обивка:.5em;

  -moz-box-sizing: рамка-рамка;
  размер коробки: рамка-рамка;

  фон: черный;
}

li {
  дисплей: встроенный блок;
  маржа: 0;
  заполнение: 0.5em;
  фон: белый;
}

Когда у нас есть несколько общих стилей, мы можем приступить к определению особого случая для ориентации

 

@media экран и (ориентация: портретная) {
  #toolbar {
    ширина: 100%;
  }
}



@media screen и (ориентация: альбомная) {
  #toolbar {
    положение: фиксированное;
    ширина: 2,65 мм;
    высота: 100%;
  }

  п {
    маржа слева: 2em;
  }

  li + li {
    маржа-верх:.5em;
  }
}

И вот результат

Примечание: Медиа-запрос ориентации фактически применяется на основе ориентации окна браузера (или iframe), а не ориентации устройства.

Предупреждение: Этот API является экспериментальным и в настоящее время доступен в Firefox OS и Firefox для Android с префиксом moz и для Internet Explorer в Windows 8.1 и выше с префиксом мс .

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

API ориентации экрана создан для предотвращения или обработки такого изменения.

Изменение ориентации при прослушивании

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

  screen.addEventListener ("изменение ориентации", function () {
  console.log («Ориентация экрана:» + screen.orientation);
});

Предотвращение изменения ориентации

Любое веб-приложение может заблокировать экран в соответствии со своими потребностями. Экран блокируется с помощью метода Screen.lockOrientation () и разблокируется с помощью метода Screen.unlockOrientation () .

Screen.lockOrientation () принимает строку (или серию строк) для определения типа применяемой блокировки.Допустимые значения: портретная-основная , портретная-дополнительная , альбомная-основная , альбомная-дополнительная , портретная , альбомная (см. Screen.lockOrientation , чтобы узнать больше о каждом из этих значений. ).

  screen.lockOrientation ('пейзаж');

Примечание. Блокировка экрана зависит от веб-приложения. Если приложение A заблокировано для альбомной ориентации , а приложение B заблокировано для книжной ориентации , переключение из приложения A в B или из B в A не вызовет событие изменения ориентации , потому что оба приложения сохранят ориентацию, которую они имели.

Однако блокировка ориентации может вызвать событие Изменение ориентации , если ориентация должна быть изменена для удовлетворения требований блокировки.

Для конкретного способа блокировки ориентации в Firefox OS и Firefox Android (скоро он будет работать и на рабочем столе Firefox) вы можете установить поле ориентации в файле манифеста приложения, например:

  "ориентация": "портрет"

html — Как установить портретные и альбомные медиа-запросы в CSS?

Медиа-запросы к iPad (все поколения, включая iPad mini)

Благодаря работе Apple над созданием единообразия для пользователей и легкости времени для разработчиков, все 5 различных iPad (iPad 1-5 и iPad mini) могут быть нацелены с помощью всего одного медиа-запроса CSS.Следующие несколько строк кода должны идеально работать для адаптивного дизайна.

iPad в книжной и альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (max-device-width: 1024px) {/ * СТИЛИ ЗДЕСЬ * /}

iPad в альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: альбомная) {/ * СТИЛИ ЗДЕСЬ * /}

iPad в портретной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: портретная) {/ * СТИЛИ ИДЕТ ЗДЕСЬ * /}

iPad 3 и 4 Медиа-запросы

Если вы хотите настроить таргетинг только на iPad Retina 3-го и 4-го поколения (или планшеты с аналогичным разрешением), чтобы добавить графику @ 2x или другие функции для дисплея Retina планшета, используйте следующие медиа-запросы.

iPad Retina в портретной и альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (-webkit-min-device-pixel-ratio: 2) {/ * СТИЛИ ЗДЕСЬ * /}

iPad Retina в альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: альбомная)
и (-webkit-min-device-pixel-ratio: 2) {/ * СТИЛИ ЗДЕСЬ * /}

iPad Retina в портретной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: портретная)
и (-webkit-min-device-pixel-ratio: 2) {/ * СТИЛИ ЗДЕСЬ * /}

iPad 1 и 2 Медиа-запросы

Если вы хотите предоставить другую графику или выбрать другую типографику для дисплея iPad с более низким разрешением, медиазапросы ниже будут работать как шарм в вашем адаптивном дизайне!

iPad 1 и 2 в книжной и альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (-webkit-min-device-pixel-ratio: 1) {/ * СТИЛИ ЗДЕСЬ * /}

iPad 1 и 2 в альбомной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: альбомная)
и (-webkit-min-device-pixel-ratio: 1) {/ * СТИЛИ ЗДЕСЬ * /}

iPad 1 и 2 в книжной ориентации

  @media только экран
и (минимальная ширина устройства: 768 пикселей)
и (максимальная ширина устройства: 1024 пикселей)
и (ориентация: портретная)
и (-webkit-min-device-pixel-ratio: 1) {/ * СТИЛИ ЗДЕСЬ * /}

Источник: http: // stephen.io / mediaqueries /

@ media.orientation — CSS — W3cubDocs

Ориентация Функция мультимедиа CSS может использоваться для проверки ориентации области просмотра (или страничного блока для мультимедийных материалов с разбивкой на страницы).

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

Синтаксис

Элемент ориентации указан как значение ключевого слова, выбранное из списка ниже.

Значения ключевых слов

портрет: Область просмотра имеет книжную ориентацию, то есть высота больше или равна ширине.
альбомная: Область просмотра имеет альбомную ориентацию, т. Е. Ширина больше высоты.

Примеры

HTML

  Блок 1 
 Вставка 2 
 Вставка 3

CSS

 корпус {
  дисплей: гибкий;
}

div {
фон: желтый;
}

@media (ориентация: альбомная) {
  тело {
    flex-direction: ряд;
  }
}

@media (ориентация: портретная) {
  тело {
    flex-direction: столбец;
  }
}

Результат

Технические характеристики

	Настольный
	Хром	Край	Firefox	Internet Explorer	Opera	Safari
`ориентация` функция носителя	3	12	2	9	10.6	5

	мобильный
	Android веб-просмотр	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Интернет Samsung
`ориентация` функция носителя	≤37	18	4	11	4,2	1,0

Как определить ориентацию устройства с помощью медиа-запросов CSS

Ориентация экрана несколько отличается от ориентации устройства.В отличие от экрана, устройство не может определять свою ориентацию. В любом случае полезно иметь возможность контролировать ориентацию экрана для поддержки и адаптации интерфейса веб-приложения.

Есть несколько способов, которыми вы можете управлять ориентацией экрана. Это можно сделать как с помощью CSS, так и с помощью Javascript. В этом фрагменте нас интересует решение с использованием CSS.

Ниже мы используем запрос ориентации @media и позволяем контенту настраивать свой макет в зависимости от того, находится ли окно браузера в альбомном режиме (ширина больше высоты) или в портретном режиме (высота больше ширины ).

Итак, в следующем примере мы устанавливаем для свойства flex-direction значение «row» для ориентации в альбомном режиме и используем значение «column» того же свойства для ориентации в портретном режиме.

Пример настройки макета в зависимости от ориентации экрана: ¶

  

  
     Название документа 
    <стиль>
      тело {
        дисплей: гибкий;
      }
      div {
        фон: # c579d1;
      }
      @media (ориентация: альбомная) {
        тело {
          flex-direction: ряд;
        }
      }
      @media (ориентация: портретная) {
        тело {
          flex-direction: столбец;
        }
      }
    
  
  
     Первое окно 
     Вторая коробка 
     Третье поле

Попробуйте сами »

Обратите внимание, что функция мультимедиа с ориентацией CSS применяется на основе ориентации окна браузера или окна iframe, а не ориентации устройства.Открытие программной клавиатуры на многих устройствах может сделать область просмотра шире, чем ее высота, и это приведет к тому, что браузер будет использовать альбомные стили вместо портретной.

Пример использования функции мультимедиа с ориентацией CSS: ¶

  

  
     Название документа 
    <стиль>
      html,
      тело {
        ширина: 100%;
        высота: 100%;
      }
      тело {
        граница: 1px solid # 666;
        -moz-box-sizing: рамка-рамка;
        размер коробки: рамка-рамка;
      }
      п {
        шрифт: 16px без засечек;
        маржа: 0;
        обивка:.5em;
      }
      ul {
        шрифт: 14px моноширинный;
        стиль списка: нет;
        маржа: 0;
        заполнение: .5em;
        -moz-box-sizing: рамка-рамка;
        размер коробки: рамка-рамка;
        фон: # 9289d6;
      }
      li {
        дисплей: встроенный блок;
        маржа: 0;
        заполнение: 0.5em;
        фон: #fff;
      }
      @media экран и (ориентация: портретная) {
        #пример {
          ширина: 100%;
        }
      }
      @media screen и (ориентация: альбомная) {
        #пример {
          положение: фиксированное;
          ширина: 2.65em;
          высота: 100%;
        }
        п {
          маржа слева: 2em;
        }
        li + li {
          верхнее поле: .5em;
        }
      }
    
  
  
    
       1 
       2 
       3 
    
    
        Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда
        Неизвестный типограф взял камбуз с шрифтом и скремблировал его, чтобы сделать книгу с образцами шрифта.
        Он пережил не только пять веков, но и скачок в электронный набор,
        оставаясь практически без изменений.

Попробуйте сами »

Ориентация медиа-запросов: альбомная — HTML и CSS — Форумы SitePoint

OBXjuggler:

Прошу уточнить.

OBXjuggler:

— это то, что вы мне говорите, мне нужен подход «прежде всего мобильные»?

Он может быть сначала мобильным, либо сначала настольным (медиа-запросы минимальной или максимальной ширины). Однако я предпочитаю подход, основанный на настольных компьютерах, потому что именно так я проектировал последние 25 лет и так, как я привык. Мне также проще иметь полноэкранную версию, а затем создать мобильную версию из этой полноэкранной версии.

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

Какой бы подход вы ни выбрали, это нормально, если вы последовательны.

Я начинаю без каких-либо медиа-запросов и создаю оболочку страницы и начинаю с заголовка и навигации. Навигация — это фактически самая важная вещь на странице (помимо фактического содержимого, конечно).

С горизонтальной навигацией вы должны задать себе ряд вопросов, прежде чем начать.

Сколько пунктов меню в навигаторе?
Будут ли элементы меняться с течением времени, и в них будет больше или меньше записей.
Изменится ли текст в пунктах меню?
Как навигатор справится с изменением размера шрифта?

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

После того, как вы сделали этот раздел и проверили всю ширину и проверили в нескольких разных браузерах (и проверили HTML и CSS), вы можете перейти к следующему разделу и более или менее забыть об этом.

Затем вы переходите к следующему элементу на своей странице, каким бы он ни был, и действуете точно так же.

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

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

OBXjuggler:

снова вы сказали выше « Забудьте об устройствах и ориентации. »
Разве у меня никогда не будет ориентации: ландшафтная необходимость в будущем?

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

Все альбомные высоты различаются по высоте, и действительно, большинство пользователей держат свои телефоны в вертикальном положении, если только они не просматривают видео. Даже для видео вам не обязательно знать о ландшафте, поскольку видео обычно имеют одинаковое соотношение сторон, а высота будет зависеть от ширины видео.

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

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

Пользователи телефона

знают, что им нужно прокручивать, поэтому просто установите разумную высоту там, где пространство ограничено.

В основном это касается максимально эффективного использования доступного пространства.

Если в любой момент вы увидите горизонтальную полосу прокрутки в окне просмотра, это означает, что вы не сделали дизайн достаточно гибким, и устройство где-то в мире умрет. Горизонтальная полоса прокрутки в области просмотра — это то, чего вам нужно избегать всегда, если требуется адаптивный дизайн.

Всегда хорошо помнить, что не у всех окно рабочего стола развернуто. У меня большой 27-дюймовый экран, 3 браузера и несколько открытых приложений, все они разного размера и высоты.Мне все еще нравится иметь возможность читать каждую из них без необходимости разворачивать или перемещать окно. Это означает, что, несмотря на то, что у меня разрешение экрана 2500 пикселей, я набираю это сообщение в окне браузера, размер которого составляет примерно 800 x 1000 пикселей. По сути, вы должны обслуживать бесконечное множество размеров, поэтому вы не можете сделать это с бесконечным количеством медиа-запросов.

Создавайте гибкие / гибкие элементы (для этого подходят flexbox и grid), а затем добавляйте медиа-запросы, когда элементы уже не достаточно гибкие, чтобы соответствовать им.

Эти статьи старые (2012 г.), но объясняют концепцию, которую я только что упомянул.

Запутанный в дизайне — 20 марта 12

Решение, какие адаптивные точки останова использовать — запутано в дизайне

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

Smashing Magazine — 22 марта 12 г.

Аппаратно-независимый подход к адаптивному веб-дизайну — Smashing Magazine

Это другой подход к адаптивному веб-дизайну.В этой статье обсуждается, как мы можем лучше понять суть Интернета, игнорируя большого слона в комнате; то есть, как мы можем полагаться на медиа-запросы и точки останова, не беспокоясь о …

Даже в 2012 году было слишком много устройств. Сейчас их еще сотни.

медиа-запросов CSS — TutorialBrain

На главную »CSS» Медиа-запросы CSS

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

Не только это, есть много случаев, когда вы можете использовать Media Queries, и мы собираемся охватить большинство из них.

Медиа-запрос был введен как часть CSS3. Это также рекомендуется W3C.

Это способ включения различных стилей на основе характеристик устройства наряду с типом устройства. Характеристики (свойства) устройств могут быть такими: —

Разрешение устройства
Размер устройства, например ширина устройства или высота устройства
Размер области просмотра, например ширина или высота свойство
соотношение сторон области просмотра
ориентация области просмотра

CSS2 уже представил запрос @media ранее для применения разных стилей на основе разных типов мультимедийных устройств.

Но это правило @media не работало должным образом, поскольку различные устройства не были подготовлены для его надлежащей поддержки. Следовательно, в CSS3 он был изменен для применения стилей на основе характеристик (свойств) устройства, а не только типа устройства.

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

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

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

Важные характеристики или функции носителя

Существует множество мультимедийных функций, и некоторые из них даже добавлены как часть Media Queries Level 4.

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

Как только другие мультимедийные функции станут более стабильными для всех современных браузеров, мы также обновим их в нашем руководстве.

Примеры медиа-запросов с различными медиа-функциями

 1.Соотношение сторон
@media (соотношение сторон: 1/1) {стили CSS ...}

2. Связанные с цветом
@media (цвет) {стили CSS ...}
@media только печать и (цвет) {стили CSS ...}
@media not print and (color), screen and (color) {Стили CSS ...}
@media not (печать и (цвет)), экран и (цвет) {стили CSS ...}
@media (не (печать и (цвет))), экран и (цвет) {стили CSS ...}

3. Связанные с сеткой
@media (grid: 0) {Стили CSS ...}
@media (grid: 2) {Стили CSS...}

4. В зависимости от высоты
@media all (height: 200px) {стили CSS ...}

5. Связанные с наведением
@media (hover: hover) {CSS Styles ...} / * Может навести курсор на элементы * /
@media (hover: none) {Стили CSS ...} / * Невозможно навести курсор мыши на элементы * /
@media (not (hover)) {CSS Styles ...} / * Отрицание вместе с наведением * /

6. Связанные с максимальным соотношением сторон
@media (max-ratio-ratio: 2/1) {Стили CSS ...}

7. max-color Related
@media (max-color: 2000) {Стили CSS...} / * Устройство, которое имеет максимум 2000 бит на цвет * /

8. Связанные с максимальной высотой
@media all и (max-height: 200 пикселей) {стили CSS ...}

9. Связанное с максимальным разрешением
@media (максимальное разрешение: 250 точек на дюйм) {стили CSS ...}

10. Связанные с максимальной шириной
@media screen и (max-width: 200 пикселей) {стили CSS ...}

11. Мин-соотношение сторон Связанные
@media (min-aspect-ratio: 2/1) {Стили CSS ...}

12. Связанные с min-color
@media (min-color: 20) {Стили CSS ...} / * Устройство, имеющее не менее 20 бит на цвет * /

13. Связанные с мин-высотой
@media only screen и (min-height: 200px) {CSS Styles ...}

14. Мин-разрешение, связанное с
@media (минимальное разрешение: 60 точек на дюйм) {стили CSS ...}

15. Связанные с минимальной шириной
@media, а не экран и (min-width: 200 пикселей) {стили CSS ...}

16. Ориентация, связанная с
@media (ориентация: портрет) {стили CSS ...}
@media (ориентация: альбомная) {стили CSS ...}

17. Связанные с резолюцией
@media (разрешение: 100 точек на дюйм) {стили CSS...}

18. сканирование по теме
@media (сканирование: чересстрочная развертка) {стили CSS ...}
@media (развертка: прогрессивная) {стили CSS ...}

19. ширина Связанная
@media (ширина: 280 пикселей) {стили CSS ...}

Тип носителя @media all устанавливает различные свойства стиля для всех типов носителя. Это медиа-запрос для всех устройств.

Например:

Если вы хотите изменить цвет фона для всех устройств на определенный цвет, вы можете использовать @media all с другими характеристиками, такими как ширина, высота, минимальная ширина, максимальная ширина, разрешение и т.д. для всех устройств.

 @media all and (min-width: 540px) {
  .main-parent {
    красный цвет;
    размер шрифта: 22 пикселя;
    фон: черный;
    бордюр: твердый помидор 4px;
  }
}

Примечание / информация / успех
@media all - тип носителя по умолчанию.

×
Закрыть оповещение

Свойство печати медиа-запроса CSS @media print устанавливает разные стили для документов печати.

Например:
Если вы хотите перейти в режим печати, выполните следующие действия -

Для Windows - CTRL + P
Для Mac - Command-P

Примечание / информация / успех
Чтобы понять приведенный ниже пример (т.е. @media print ), перейдите в режим ПЕЧАТЬ. Просто следуйте приведенному выше ярлыку, чтобы перейти в режим печати, если вы используете Windows или Mac.
Если вы используете другие устройства, такие как android, iphone и т. Д., Следуйте ярлыку в соответствии с устройством.

×
Закрыть оповещение

 @media print и (min-width: 340px) {
  .main-parent {
    красный цвет;
    размер шрифта: 18 пикселей;
    бордюр: твердый помидор 4px;
  }
}

Свойство CSS media screen @media screen устанавливает различные свойства стиля для всех экранов цветного монитора.

Это широко используемый тип носителя.

 @media screen и (max-width: 500 пикселей) {
  .главный {
    красный цвет;
    бордюр: твердый помидор 4px;
  }
}

Медиа-запрос CSS @ media-speech - используется для типов устройств, которые имеют функции распознавания речи, такие как программы чтения с экрана.

Например:

 @media speech and (max-width: 1024px) {
  .главный {
   ширина: 400 пикселей;
   маржа: 5 пикселей;
  }
}

Мы уже использовали min-width и max-width выше.Давайте разберемся в этом дальше на примере.

Медиа-запрос min-width используется для установки различных стилей, если вы хотите применить стиль только тогда, когда размер устройства больше определенной ширины.

С другой стороны, медиа-запрос max-width используется для установки различных стилей, если вы хотите применить стиль только тогда, когда размер устройства меньше определенной ширины.

Пример минимального и максимального медиа-запроса

 @media all and (min-width: 768px) and (max-width: 1024px) {
  .главный {
    коричневый цвет;
    граница: сплошной светло-голубой, 6 пикселей;
  }
}

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

На практике иногда может потребоваться скрыть определенные элементы на основе некоторых свойств, таких как ширина, высота и т. Д.

Есть несколько способов скрыть элементы, например -

display: none; - Это скроет элемент. По сути, он полностью удаляет элемент, и элемент не занимает места
visibility: hidden; - Это скрывает элемент, но элемент все еще занимает некоторое пространство, и элемент ведет себя так, как будто он отключен.
opacity: 0; - это похоже на видимость : скрытый , но это не отключает элемент, и вы все равно можете выбрать элемент
text-indent: -99999px - Как правило, используя очень большое отрицательное значение text-indent, вы можно добиться аналогичного эффекта.

Из них наиболее популярным способом, который предлагает TutorialBrain, является использование дисплея : нет . Некоторые разработчики Front End также предпочитают использовать видимость : скрыто .

Пример медиа-запроса для скрытия элементов

 @media (max-width: 500 пикселей) {
 .imgval {
     дисплей: нет;
 }
}

Сложные медиа-запросы могут быть созданы с помощью комбинации -

Операторы

и объединяют один тип носителя

с другими типами носителя
Один тип носителя с другими свойствами носителя (функциями носителя), такими как ширина, высота и т. Д.
A Одно свойство носителя (функции носителя ) с несколькими свойствами мультимедиа (функции мультимедиа)

Пример оператора "и"

 p {
 отступ: 10 пикселей;
 граница: 2 пикселя сплошного коричневого цвета;
 размер шрифта: 2em;
}

@media (min-width: 400px) и (max-width: 700px) {
 p {box-shadow: 25px 15px 10px серый;
   фон: светло-голубой;
 }
}

Оператор

not является оператором отрицания.Важно предоставить тип носителя при использовании оператора , а не .

Этот оператор отменяет весь медиа-запрос (а не отдельную медиа-функцию).

Итак, в основном, когда весь медиа-запрос истинен, этот оператор меняет выражение на ложное. Точно так же, если медиа-запрос ложен, тогда этот оператор возвращает выражение в истинное значение.

Пример оператора "не"

 p {
 отступ: 10 пикселей;
 граница: 5px сплошной малиновый;
 размер шрифта: 2em;
 семейство шрифтов: Trebuchet MS;
}
@media not all and (max-width: 500px) {
 п {
  тень текста: 2px 4px 3px серый;
  радиус границы: 22 пикселя;
 }
}

Оператор запятой (,) аналогичен логическому оператору ИЛИ .

Запятая (,) Оператор отделяет каждый медиа-запрос от других медиа-запросов через запятую (,). Если любой из медиа-запросов, разделенных запятой, равен true , тогда весь медиа-запрос будет true , и то же правило будет применяться ко всем медиа-запросам, разделенным запятыми.

Пример оператора "запятая (,)"

 .flexbox-MQ {
 маржа: 10 пикселей;
 дисплей: гибкий;
}

.child-val {
 отступ: 5 пикселей;
 маржа: 5 пикселей;
 ширина: 60 пикселей;
 высота: 60 пикселей;
 выравнивание текста: центр;
 граница: сплошной черный 1px;
 цвет фона: # 94C548;
}

@media (max-width: 500px), (min-width: 700px) {
 .flexbox-MQ {дисплей: сетка;}
}

Только имеет какое-либо значение для новых браузеров. Важно предоставить носитель типа , в то время как использует только оператор .

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

Пример «единственного» оператора

 .grid-MQ {
 дисплей: блок;
 цвет: # 09559E;
 высота: 70 пикселей;
}

.inside-val {
 отступ: 2 пикселя;
 маржа: 5 пикселей;
 граница: 2px solid # 09559E;
}

@media only screen и (max-width: 500px) {
.grid-MQ {дисплей: встроенный блок;
  черный цвет;}
}

Соотношение сторон

в медиа-запросе

В изображении отношение ширины к высоте называется соотношением сторон.С точки зрения веб-страницы это отношение ширины области просмотра к высоте.

Вы можете создать несколько стилей в зависимости от соотношения сторон.

Некоторые общие соотношения сторон для изображений:

Свойства соотношения сторон, такие как соотношение сторон , мин-соотношение сторон , максимальное соотношение сторон и т. Д., Используются для установки разных стилей для разных соотношений сторон.

Пример соотношения сторон в медиа-запросе

 h3 {padding: 10;
окантовка: 2 сплошных коричневых;
}
 / * 476 X 476 Соотношение сторон для точных значений * /
@media (соотношение сторон: 1/1) {
h3 {цвет фона: голубой;
цвет: зеленый;
}
}
/ * Минимальное соотношение сторон 953 X 476 * /
@media (минимальное соотношение сторон: 2/1) {
h3 {цвет фона: золото;
размер шрифта: 3em;
}
}
* Максимальное соотношение сторон * /
@media (максимальное соотношение сторон: 2/1) {
h3 {цвет фона: коралловый;
размер шрифта: 1em;
}
}

Ориентация медиа-запроса CSS

Есть 2 типа ориентации страницы.

Портрет
Альбом

В режиме Портрет размер по высоте больше размера по ширине.

Свойство ориентация: портретная ориентация используется для портретного режима.

Пример портрета медиа-запроса CSS

 .portrait-MQ {
  семейство шрифтов: тахома;
  -webkit-text-stroke: 1,3 пикселя черный;
  -webkit-text-fill-color: белый;
}

@media (ориентация: портретная) {
   .портрет-MQ {
  -webkit-text-fill-color: золото;
   }
 }

Ландшафт медиа-запросов CSS

Ширина страницы или изображения в режиме Альбомная больше, чем высота.

Свойство ориентация: альбомная ориентация используется для портретного режима.

Пример ландшафта медиа-запросов CSS

 .landscape-MQ {
  семейство шрифтов: тахома;
  -webkit-text-stroke: 1.3px черный;
  -webkit-text-fill-color: белый;
}

@media (ориентация: альбомная) {
   .landscape-MQ {
  -webkit-text-fill-color: розовый;
     граница: сплошной черный цвет 2px;
}
  }

Медиа-запрос - один из наиболее важных способов создания адаптивного веб-дизайна.

Итак, важно стилизовать медиафайлы в зависимости от размеров экрана. Список различных размеров экрана представлен ниже -

Список свойств медиаустройств

Наиболее поддерживаемые функции мультимедиа	Назначение
*соотношение сторон*	Отношение ширины к высоте области просмотра
цветной Цветной экран
*сетка*	Если устройство является сеточным устройством
*высота*	высота области просмотра
наведите курсор мыши `2 9027 hovers)`
*max-aspect-ratio*	Максимальное отношение ширины к высоте области просмотра
*max-color*	Максимальное количество бит на цвет в устройстве
*max-height*	Максимальная высота области просмотра 9 0278
*макс. Разрешение*	Максимальное количество пикселей на дисплее
*max-width*	Максимальная ширина области просмотра
*10 мин-32 соотношение сторон*	Минимальное отношение ширины к высоте области просмотра
*min-color*	Минимальное количество бит на цвет в устройстве
*min-height*	Минимальная высота область просмотра
*Мин. разрешение*	Минимальное количество пикселей на дисплее
*Мин.ширина*	Минимальная ширина области просмотра
	2 Ориентация	прямоугольные страницы выровнены или расположены
*разрешение ution*	Количество пикселей на дисплее
*сканирование*	При сканировании устройства
*ширина*	Ширина области просмотра

Телефоны Android	минимальная ширина устройства	максимальная ширина устройства	Ориентация
HTC One X	360 пикселей	640px	Пейзаж
HTC One X	360 пикселей	640px	Портрет
LG G5	360 пикселей	640px	Пейзаж
LG G5	360 пикселей	640px	Портрет
Samsung Галактика S6	360 пикселей	640px	Пейзаж
Samsung Галактика S6	360 пикселей	640px	Портрет
, Samsung Galaxy S6 Edge,	360 пикселей	640px	Пейзаж
, Samsung Galaxy S6 Edge,	360 пикселей	640px	Портрет

Стандартные медиа-запросы для ТЕЛЕФОНОВ ANDROID

 / * HTC One X - альбомная и портретная * /
@media screen и (device-width: 360px) и (device-height: 640px) {/ * Стиль CSS * /}

/ * HTC One X - альбомная и портретная * /
@media screen и (device-width: 360px) и (device-height: 640px) {/ * Стиль CSS * /}

/ * LG G5 - альбомная и портретная * /
@media screen и (device-width: 360px) и (device-height: 640px) {/ * Стиль CSS * /}

/ * Samsung Galaxy S6 - Пейзаж и Портрет * /
@media screen и (device-width: 360px) и (device-height: 640px) {/ * Стиль CSS * /}

/ * Samsung Galaxy S6 Edge - альбомная и портретная * /
@media screen и (device-width: 360px) и (device-height: 640px) {/ * Стиль CSS * /}

Планшеты Android	минимальная ширина устройства	максимальная ширина устройства	Ориентация
Nexus 10	800 пикселей	1280px	Пейзаж
Nexus 10	800 пикселей	1280px	Портрет
Nexus 7	600 пикселей	960px	Пейзаж
Nexus 7	600 пикселей	960px	Портрет
Surface Pro 3	960px	1440px	Пейзаж
Surface Pro 3	960px	1440px	Портрет

Стандартные медиа-запросы для ПЛАНШЕТОВ ANDROID

 / * Nexus 10 - альбомная и вертикальная * /
@media screen и (ширина устройства: 800 пикселей) и (высота устройства: 1280 пикселей) и (ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * Nexus 7 - альбомная и вертикальная * /
@media screen и (ширина устройства: 600 пикселей) и (высота устройства: 960 пикселей) и (ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * Surface Pro 3 - альбомная и портретная * /
@media screen и (ширина устройства: 960 пикселей) и (высота устройства: 1440 пикселей) и (ориентация: альбомная / портретная) {/ * Стиль CSS * /}

Разное	минимальная ширина устройства	максимальная ширина устройства	Ориентация
BlackBerry Z10	384px	640px	Пейзаж
BlackBerry Z10	384px	640px	Портрет
Kindle Fire	1024px	600 пикселей	Пейзаж
Kindle Fire	1024px	600px	Портрет

 / * BlackBerry Z10 - альбомная и портретная * /
@media only screen и (min-device-width: 384px) and (max-device-width: 640px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * Kindle Fire - альбомная и портретная * /
@media only screen и (min-device-width: 600px) and (max-device-width: 1024px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

IPAD	минимальная ширина устройства	максимальная ширина устройства	Ориентация
iPad	768px	1024px	Пейзаж
iPad	768px	1024px	Портрет
iPad Mini	768px	1024px	Пейзаж
iPad Mini	768px	1024px	Портрет
iPad Mini 2	1536px	2048px	Пейзаж
iPad Mini 2	1536px	2048px	Портрет
iPad Pro	2048px	2732px	Пейзаж
iPad Pro	2048px	2732px	Портрет

Стандартные медиа-запросы для IPAD

 / * iPad - альбомная и вертикальная * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPad Mini - альбомная и вертикальная * /
@media only screen и (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPad Mini 2-4 - альбомная и вертикальная * /
@media only screen и (min-device-width: 1536px) and (max-device-width: 2048px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPad Pro - альбомная и вертикальная * /
@media only screen и (min-device-width: 2048px) and (max-device-width: 2732px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

IPHONE	минимальная ширина устройства	максимальная ширина устройства	Ориентация
iPhone 4	320 пикселей	480 пикселей	Пейзаж
iPhone 4	320 пикселей	480 пикселей	Портрет
iPhone 5	320 пикселей	568px	Пейзаж
iPhone 5	320 пикселей	568px	Портрет
iPhone 7	375px	667px	Пейзаж
iPhone 7	375px	667px	Портрет
iPhone 7 Plus	414px	736px	Пейзаж
iPhone 7 Plus	414px	736px	Портрет

Стандартные медиа-запросы для IPHONE

 / * iPhone 4 - Пейзаж и портрет * /
@media only screen и (min-device-width: 320px) and (max-device-width: 480px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPhone 5 - Пейзаж и портрет * /
@media only screen и (min-device-width: 320px) and (max-device-width: 568px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPhone 7 - альбомная и портретная * /
@media only screen и (min-device-width: 375px) and (max-device-width: 667px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

/ * iPhone 7plus - альбомная и портретная * /
@media only screen и (min-device-width: 414px) and (max-device-width: 736px) and (Ориентация: альбомная / портретная) {/ * Стиль CSS * /}

Как использовать медиа-запросы CSS для адаптивного дизайна?

CSS - одна из основ веб-разработки и дизайна.Хотя CSS начинался как что-то, что может изменить стиль веб-страницы, каждая итерация спецификации CSS теперь приносит больше, особенно когда речь идет о кроссбраузерной совместимости.

Сегодня CSS - это больше, чем просто «фоновый цвет» и спецификации тегов, которые сделали первые дни веб-разработки очень интересными. CSS стал вспомогательным инструментом в реализации дизайна, ориентированного на мобильные устройства, и адаптивного веб-дизайна в веб-приложениях без особых усилий.

В этом посте мы глубоко погрузимся в концепцию медиа-запросов CSS: свойство CSS, которое может вносить некоторые изменения в веб-страницу, глядя на устройство.Мы также увидим, как все развивалось, и в дальнейшем сосредоточимся на том, как мы можем реализовать медиа-запросы CSS с адаптивным дизайном, чтобы обеспечить удобство взаимодействия с пользователем для вашего веб-сайта.

Что такое медиа-запросы CSS?

Медиа-запросы CSS начинались со спецификации CSS2, которая включала медиа-правило CSS в свою библиотеку. Медиа-правила были введены в CSS после наблюдения за различными мультимедийными устройствами, наводнившими рынок и хорошо воспринятыми потребителями.

Например, это было захватывающее время, когда были представлены речевые устройства, которые могли читать веб-страницу за вас. Но, к сожалению, хотя правила для СМИ были настолько важны, они не впечатлили сообщество разработчиков. Сильная причина в том, что медиаустройства не были готовы к такой трансформации (по крайней мере, до этого момента!).

Источник: EmailonAcid

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

медиа-запросов CSS, как мы знаем, изменили то, как мы сегодня разрабатываем адаптивные веб-приложения. Медиа-запросы CSS - это условия и запросы, которые отлично работают в век сотен устройств и браузеров.

В то время как медиа-правила смотрели на смартфон, медиа-запросы CSS смотрели на область просмотра, разрешение и даже ориентацию. Эти медиа-запросы дали уникальную возможность рендеринга контента в соответствии с типом устройства или его ориентацией, что привело нас к следующему шагу в адаптивном веб-дизайне.Изменение, о котором думали разработчики CSS, было хорошо принято и стало неотъемлемой частью веб-дизайна с помощью медиа-запросов CSS.

Наступил 2021 год! Нам действительно нужны медиа-запросы?

Первое, что может прийти вам в голову: «Действительно ли нам нужны медиа-запросы CSS, учитывая множество технологий и спецификаций, появляющихся каждый день»? Это искренний и частый вопрос для тех, кто начинает свой путь с медиа-запросов.

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

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

Источник: Google

Другая часть сеток CSS - это гибкий блок CSS, который также является адаптивным по своей природе и наиболее подходит для небольших макетов.Как веб-разработчик, у вас также может быть собственный набор инструментов, которые очень быстро реагируют. Эти инструменты сводят на нет наши усилия и экономят много времени, оставляя нас с постоянным вопросом: «Должны ли мы изучать медиа-запросы прямо сейчас, в 2021 году»?

Я считаю, что при ответе на этот вопрос нужно учитывать две вещи: нужны ли нам медиа-запросы CSS в 2021 году. Что ж, это определенно правда, что новые методы и элементы CSS дают более быстрые и лучшие результаты с точки зрения отзывчивости. Однако верно и то, что как веб-разработчик я сам рекомендовал бы другим разработчикам использовать новые спецификации, а не сосредотачиваться на медиа-запросах.

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

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

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

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

Читать Создание адаптивных изображений с помощью CSS, HTML, WordPress и др.!

Как писать медиа-запросы в CSS для адаптивного дизайна?

Синтаксис для медиа-запросов CSS напоминает аннотации TestNG, которые, как начинающий веб-разработчик, вы найдете немного уникальными.

Медиа-запрос может быть реализован словом «медиа» следующим образом:

@media коннектор ()

@media коннектор ()

Например:

@media only screen и (max-width: 480px) {
/ * Применяемые правила CSS / *
}

@media only screen and (max-width: 480px) {

/ * CSS rules to apply / *

}

Этот медиа-запрос будет искать экраны («только экран», как написано) с максимальной шириной 480 пикселей.Если он его найдет, условия будут выполнены, и в HTML-код будут внесены изменения.

Для применения только медиа-типа, а не медиа-выражений (запросов), принимаются следующие значения:

@media print {
.Заголовок {
размер шрифта: 12 пикселей
}
}

@media print {

.heading {

font-size: 12px

}

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

Правила для средств массовой информации

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

Правила для ширины и высоты материалов для печати

Первое правило мультимедийных функций, которое следует учитывать, - это проверить ширину и высоту области просмотра.Операции с шириной можно проверить с помощью свойств «width», «max-width» и «min-width» для значений узких мест.

Пример правила максимальной ширины носителя:

@media screen и (max-width: 840px) {
п {
красный цвет;
}
}

@media screen и (max-width: 840px) {

p {

color: red;

}

Полный код для достижения адаптивного дизайна с помощью правила мультимедиа можно записать как:

Медиа-запросы
<стиль>
@media screen и (max-width: 840px) {
п {
красный цвет;
}
}

<центр>
Проверка медиа-правил

1
2
3
4
5
6
7
8
9
10
11
12
13
140002
18
19
20

Медиа-запросы
Проверка правил для носителей
Для экрана шириной более 840 пикселей тег «p» будет отображать содержимое черным цветом следующим образом:
Снимок экрана выше сделан на платформе LambdaTest.
На экране шириной менее 840 пикселей правило мультимедиа изменит контент на красный цвет и размер шрифта следующим образом:
Приведенный выше код отображается в удобном для разработчиков браузере под названием LT browser, который помогает в адаптивном тестировании и разработке на экранах с 50+ разрешениями. Вы можете выполнять тесты мобильных веб-сайтов в браузере LT быстрее и проще, используя такие функции, как параллельный просмотр, синхронизация прокрутки, мгновенная отладка, сетевое моделирование и многое другое. Кроме того, LT Browser позволяет вам сотрудничать с вашей командой для масштабирования процесса разработки за счет интеграции с инструментами управления проектами.

Для более четкого просмотра вы можете запустить HTML-код в своем браузере и начать уменьшать область просмотра, чтобы увидеть эффект.
Используемый выше браузер - Opera на платформе Windows 10. Точно так же вы можете использовать правило высоты и ширины.
СКАЧАТЬ LT BROWSER
Ориентация в медиа-запросе CSS
Ориентация устройства - одна из основных проблем, снижающих скорость отклика вашего веб-сайта. Отзывчивость никогда не может быть достигнута, если веб-приложение не может понять ориентацию и реагировать соответствующим образом.Как и в случае с медиа-запросами, знание ориентации устройства может помочь нам организовать контент по-другому, что повысит скорость отклика.
Правило ориентации носителя может быть применено как следующий пример:
@media (ориентация: альбомная) {
п {
красный цвет;
размер шрифта: 36 пикселей;
}
}
@media (ориентация: альбомная) {
p {
цвет: красный;
размер шрифта: 36 пикселей;
}
}
Приведенный выше код применит правила мультимедиа в альбомной ориентации, в то время как книжная ориентация будет работать нормально.
Приведенный выше снимок экрана сделан из браузера LT, который может одновременно отображать два устройства для тестирования.
Разъемы
в правилах для носителей
В большинстве случаев одного правила мультимедиа недостаточно для обеспечения скорости отклика. Что, если мы хотим реализовать правило мультимедиа на определенных устройствах и с определенными условиями? Для таких требований мы используем коннекторы (логические) в правилах мультимедиа. В медиа-запросах CSS соединители принимают три значения:
Эти соединители имеют то же значение, что и в логических выражениях и в языках программирования.Чтобы применить соединитель «и», вам поможет следующий код:
@media (ориентация: альбомная) и (минимальная ширина: 1080 пикселей) {
п {
красный цвет;
размер шрифта: 36 пикселей;
}
}
@media (ориентация: альбомная) и (минимальная ширина: 1080 пикселей) {
p {
цвет: красный;
размер шрифта: 36 пикселей;
}
}
Приведенный выше код работает только при минимальной ширине экрана 1080 пикселей и альбомной ориентации.Поскольку мобильный телефон не попадает в эту категорию, давайте посмотрим, хорошо ли работает правило мультимедиа в данной ситуации.
@media (ориентация: альбомная), (min-width: 1080 пикселей) {
п {
красный цвет;
размер шрифта: 36 пикселей;
}
}
@media (ориентация: альбомная), (минимальная ширина: 1080 пикселей) {
p {
цвет: красный;
размер шрифта: 36 пикселей;
}
}
Приведенное выше правило мультимедиа будет применяться, если ориентация - альбомная или минимальная ширина - 1080 пикселей.В мобильных устройствах наблюдаются следующие изменения:
Так как правило ландшафта выполнено, правила мультимедиа применяются соответственно. Тот же эффект будет виден на экране с шириной более 1080 пикселей.
Правило «not» может применяться с ключевым словом «not», и это будет хорошей практикой для читателей. Прокомментируйте ниже свои уникальные медиа-запросы, чтобы помочь сообществу.
Продемонстрированный выше код был представлен на уровне 3 спецификации.С уровнем 4 мы получаем немного больше гибкости с точки зрения определения чисел и интервалов без использования логических операторов, то есть соединителей. Спецификация уровня 4 в правилах мультимедиа вводит диапазоны в запросы. Итак, запрос:
(минимальная ширина: 640 пикселей) и (максимальная ширина: 1080 пикселей)
(минимальная ширина: 640 пикселей) и (максимальная ширина: 1080 пикселей)
Может быть записано со спецификацией уровня 4 следующим образом:
(640 пикселей <= ширина <= 1080 пикселей)
(640 пикселей <= ширина <= 1080 пикселей)
Что немного лучше и яснее в определении медиа-правил.Однако для разработчика нет никаких ограничений, и оба они могут использоваться для достижения отзывчивости.
Точки останова и их методы
Этот пост показывает нам, как добиться адаптивного веб-дизайна с помощью медиа-запросов, правил и выражений. Приятно контролировать элементы и видеть, как они изменяются по нашему желанию. Но проблема здесь в том, как решить, в какой момент мы хотим, чтобы эти правила мультимедиа применялись к элементам? 640 пикселей или 1080 пикселей или что-то еще? Это число, которое работает как точка отражения, называется точкой останова, в которой выполняются медиа-запросы.Выбор случайных точек останова - плохая стратегия адаптивного дизайна, и ее никогда не следует применять без анализа.
Прочтите 10 проблем адаптивного веб-дизайна и их решение
Лучший способ анализировать точки останова - использовать адаптивную панель браузера. Адаптивная панель в браузере позволяет изменять размер окна (или выбирать несколько разрешений), помогая нам быстро и точно выбирать узкие места.
Чтобы открыть панель в Google Chrome, откройте веб-сайт (как LambdaTest открывался в этой демонстрации).
Щелкните правой кнопкой мыши и выберите Проверить .
Щелкните значок, показанный ниже, после открытия панели проверки.
Откроется отзывчивая панель. Здесь вы можете настроить размеры экрана и проверить узкие места.
Обратите внимание, как изменяется разрешение при уменьшении / расширении экрана (верхняя панель). Эта панель поможет разработчикам увидеть точки останова, в которых код выходит за пределы экрана. То же самое можно применить и к правилам мультимедиа.
Мобильные браузеры стали основным выбором пользователей во всем мире. Что касается стратегии дизайна, в настоящее время всегда рекомендуется использовать стратегию дизайна, ориентированную на мобильные устройства, для идеального адаптивного дизайна.
Если вы разработчик, то оставление мобильных устройств на втором месте в списке может раздражать ваших пользователей. Начните разработку с мобильных устройств и постепенно двигайтесь вверх по цепочке (или назад во времени). Такой метод всегда гарантирует, что ваши мобильные пользователи будут довольны, а созданный вами веб-сайт будет отзывчивым.Для проверки ваших проектов предпочтительно использовать браузер для мобильных устройств, например LT-браузер, поскольку он предоставляет больше возможностей, гибкость и масштабируемость.
Кроссбраузерная совместимость для медиа-запросов CSS
Как вы можете видеть на изображении ниже, кроссбраузерная совместимость для запросов CSS Media действительно великолепна. Однако он не поддерживает старые версии Internet Explorer и Mozilla Firefox.
Опять же, браузеры продолжают развиваться, и есть вероятность, что они могут измениться с течением времени.Что ж, на данный момент вам не нужно беспокоиться о кроссбраузерной совместимости для медиа-запросов CSS.
Завершение!
Медиа-запросы CSS
- полезный друг для создания адаптивного дизайна и разработки с дополнительными возможностями контроля и улучшения. Медиа-запросы, хотя и начинались грубо, сегодня исчерпывающе используются в проектах и веб-приложениях. В этом посте освещены основные цели медиа-запросов и то, как добиться с их помощью реагирования с помощью различных правил и выражений.Меня поражает такой красивый дизайн на Codepen и других веб-сайтах, которые разработчики создают с минимальной библиотечной поддержкой. Подходя к концу поста, мы призываем к появлению таких дизайнов в разделах комментариев и хотели бы включить лучшие из них в этот пост. Надеюсь увидеть творческую работу!
Хариш Раджора

Я инженер по информатике. Мне нравится расти вместе с развитием технологического мира. Я считаю, что нет более мощного инструмента, чем компьютер, чтобы хоть как-то изменить мир.Помимо моей специальности, я очень люблю читать книги и иногда пишу на https://www.themeaninglesslife.com.
.