CSS расширяется в зависимости от портретного или альбомного размера экрана?

Question

У меня есть два div, которые плавают рядом друг с другом. Мне бы хотелось, чтобы он имел ширину 100 пикселей, когда вы смотрите на него в портретном режиме, и, скажем, 200 пикселей в альбомной ориентации. Это происходит при просмотре на мобильном устройстве.

Таким образом, div в расширенном режиме будет немного уменьшаться в портретной ориентации.

Есть идеи?

Answer 1

Ну, это не возможно с CSS2, но было бы возможно сделать то, что вы хотите с Javascript (считайте размер экрана и т. Д.).

Я не уверен, какую технологию вы ищете, но CSS3 обеспечивает именно то, что вы хотите с CSS3 Media Queries .

С CSS3 у вас есть такие забавные вещи (или вы можете даже указать ширину, например 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

Проверьте страницу этого примера для получения более подробного объяснения или эту .

РЕДАКТИРОВАТЬ Только потому, что я нашел эту страницу сегодня: Hardbroiled CSS3 Media Queries - очень хорошая рецензия.

Answer 2

Вы можете сделать это с помощью функции css media «ориентация».Таким образом, вы можете указать стили в зависимости от ориентации экрана, независимо от размера экрана.Вы можете найти официальное определение w3.org об этой медиа-функции здесь .В сочетании со спецификациями developer.mozilla.org это объяснит, как это работает.

---

Цитата из w3.org о медиа-функции 'direction':

Медиа-функция 'direction' - это 'Portrait', когда значение медиа-функции ' height ' больше или равно значениюмедиа-функции ' width '.Иначе «ориентация» - это «пейзаж».

Примечание / цитата из developer.mozilla.org о функции «ориентации»:

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

---

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

JSFIDDLE DEMO (попробуйте изменить размер порта просмотра)

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

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }