Orientation css media: Ориентация — CSS

Orientation css media: Ориентация — CSS | MDN

Содержание

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

Применение CSS в мобильных приложениях

Последнее обновление: 31.10.2015

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

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:


<html>
 <head>
  <title>Мобильный сайт</title>
  <link media="handheld" rel="stylesheet" href="mobile.css">
  <link media="screen" rel="stylesheet" href="desktop.css">
 </head>
 <body>
 ......................

Правило media="handheld" указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media="screen" применяется к десктопным сайтам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media="screen". Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм

CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:


<html>
 <head>
  <title>Мобильный сайт</title>
  <link rel="stylesheet" type="text/css" media="screen" href="desctop.css" />
  <link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="mobile.css" />
 </head>
 <body>
 ................................

Значение атрибута media screen and (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.

Как вариант, можно использовать правила CSS3 Media Query в самом файле css:


@media screen{
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}

К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:


/*Стили только для смартфонов*/
@media screen and (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}
/*Стили только для планшетов*/
@media screen and (min-device-width:481px){
	body {
		background-color: red;
	}
	/*Далее остальные стили*/
}
/*Стили только для десктопов*/
@media screen and (min-width:769px){
	body {
		background-color: yellow;
	}
	/*Далее остальные стили*/
}

Применяемые функции в CSS3 Media Query:

aspect-ratio: отношение ширины к высоте области отображения (браузера)
device-aspect-ratio: отношение ширины к высоте экрана устройства
max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)
max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства
orientation: ориентация (портретная или альбомная)

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

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

Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.

Пуленепробиваемые 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

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

CSS CSS3 HTML5 JavaScript Media Queries

Управление ориентацией экрана — веб-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 screen и (ориентация: портретная) {
  #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 screen и (ориентация: портретная) {
        #пример {
          ширина: 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 @ media.orientation пример | Newbedev

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

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

`Синтаксис`

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

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

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

`Примеры`

`HTML`

  Коробка 1 
 Вставка 2 
 Вставка 3

`CSS`

 body {
  дисплей: гибкий;
}

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

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

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

`Результат`

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

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

	Настольный						мобильный
	Хром	Кромка	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Интернет Samsung
`ориентация`	3	12	2	9	10.6	5	≤37	18	4	11	4,2	1,0

`Использование CSS Media Queries для использования преимуществ ориентации веб-страницы`

Использование CSS Media Queries для использования преимуществ ориентации веб-страниц

 CSS прошел долгий путь с первых дней своего существования, когда изменял цвет и размер вашего текста, и хотя изначально он мог быть разработан для удаления презентационных аспектов из HTML (удаление таких элементов, как ,  и < center>), он превратился в довольно мощный язык программирования, который используется в Интернете для веб-сайтов и веб-приложений.
 Медиа-запросы CSS
 Одним из таких достижений является создание недавно опубликованной Рекомендации CSS Media Queries, являющейся частью цикла разработки CSS 3.
 Первоначальное и наиболее частое использование CSS Media Query заключалось в том, чтобы различать экран (монитор) и принтер и предоставлять различный набор стилей для каждого из них, что позволяло расширять возможности просмотра веб-страниц, а также предоставляло версия страницы для печати.
 Теперь, однако, CSS Media Queries расширилась, чтобы позволить веб-разработчикам настраивать таргетинг на определенные типы веб-мультимедиа на нескольких уровнях, таких как телевизоры, карманные устройства, проекторы и речевые устройства.
 Не только это, но и CSS Media Queries могут глубже детализировать и ориентироваться на мультимедийные аспекты, исходя из ширины и высоты устройства, соотношения сторон, разрешения устройства и даже ориентации устройства, что и есть в этой небольшой статье. о.
 Мобильные телефоны и планшеты
 Всего пару лет назад веб-сайты в основном принадлежали настольным и портативным компьютерам. Мобильные устройства, безусловно, существовали, но для устройств это было еще младенческое время, а рынок планшетов действительно находился на ранней стадии зарождения.
 Сегодня мобильный телефон способен на многое, а планшет - довольно распространенное устройство, с которого люди могут просматривать веб-страницы, из-за простоты использования, портативности и доступности планшеты и мобильные телефоны становятся предпочтительными устройствами для пользователей. быстрый просмотр Интернета.
 Когда дело доходит до просмотра веб-страниц, планшеты и мобильные телефоны можно использовать как в портретной, так и в альбомной ориентации, и хотя устройства, как правило, поддерживают любую ориентацию самостоятельно, многие из них предлагают вам, веб-разработчику, возможность изменить вашу ориентацию. дизайн веб-страницы с учетом текущей ориентации устройства.
 Ориентация устройства
 Ориентация устройства определяется способом его удержания.
 Портрет определяет использование планшета или мобильного устройства в вертикальном положении, когда длина устройства является вертикальной.
 Пейзаж определяет использование планшета или мобильного устройства, когда оно находится на боку, когда длина устройства горизонтальна.
 Обеспечение лучшего просмотра
 Несмотря на то, что планшеты и мобильные телефоны могут автоматически перерисовывать веб-страницу независимо от ориентации, пользователь не обязательно получает удобство.В портретном режиме контент может оказаться слишком сжатым, а в ландшафтном - слишком растянутым.
 Как веб-разработчик, способность различать, какая ориентация используется в данный момент, позволит вам внести небольшие коррективы в внешний вид вашей страницы.
 Например, вы можете захотеть, чтобы ваши пять ссылок на сайты отображались вверху страницы в портретном режиме, чтобы остальная часть экрана была заполнена контентом. С другой стороны, вы можете захотеть, чтобы эти ссылки отображались слева на странице в альбомном режиме.
 Или, если у вас есть фотогалерея, вы можете захотеть, чтобы ваши эскизы отображались внизу страницы в портретном режиме, при этом основная фотография заполняла верхнюю часть планшета, а в альбомном режиме вы можете предпочесть, чтобы эскизы были на верно.
 У многих веб-разработчиков в голове много разных идей, и два приведенных выше примера могут поразить вас или не представлять интереса, но факт в том, что на любом планшете и мобильных устройствах вам доступна опция, позволяющая изменить способ. страница выглядит в зависимости от ориентации, просто с небольшим CSS.HTML-код страницы может оставаться неизменным, все, что вам нужно сделать, это нацелить страницу на ее ориентацию.
 Ориентация CSS
 Вы можете применять разные стили CSS к портретному или ландшафтному режиму, используя атрибут «media» в HTML-элементе  или 
 Этот метод предназначен для ссылки на правила CSS, которые включены в веб-страницу, причем каждый блок элемента 
 Этот метод предназначен для ссылки на правила CSS, которые включены в один блок HTML-элемента 
 Этот метод предназначен для ссылки на правила CSS, которые включены в один блок HTML-элемента
 Моя страница с примером ориентации 
 Это моя маленькая страница с примером ориентации
  Как упоминалось выше, более распространенным примером может быть выравнивание некоторого содержимого по левому (или правому) краю в альбомном режиме, при этом оно остается вверху страницы в портретном режиме.
 В приведенном ниже примере показано, как вы можете выровнять фоновое изображение по HTML-элементу заголовка (
) в зависимости от ориентации страницы, например, чтобы изображение повторялось в верхней части заголовка в портретном режиме или в нижнем левом углу. сторона заголовка в альбомном режиме: 
 

 Пример ориентации 




  Моя страница с примером ориентации  
 Это моя маленькая страница с примером ориентации 

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

 Пример ориентации 





  Моя страница с примером ориентации  
 Это моя маленькая страница с примером ориентации 

 
 Пример ориентации Live CSS
 Приведенные выше примеры предназначены только для ознакомления с концепцией и возможностью определять CSS на основе ориентации устройства.
 Если у вас есть такое устройство, взгляните на http://haignet.co.uk/html-css-orientation-web-page.htm и посмотрите, предложит ли ваше устройство ориентацию на этот образец веб-страницы. Если это так, вы должны увидеть немного другой результат, если измените то, как вы держите устройство.
No related posts.

`alexxlab`

Разное

`Чередование детских смесей: особенности и рекомендации`

Разное

`Рейтузы для девочек спицами: модные и теплые модели своими руками`

Разное

`Роль взрослого в развитии общения дошкольников со сверстниками: факторы и стратегии`

Разное

`Сколько хранится молоко: правила и сроки хранения разных видов молока`

Разное

`Зеленый стул у младенца: причины, норма и когда беспокоиться`

Разное