CSS расширяется на основе размера экрана портрета или ландшафта?

Question

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

Таким образом, Div расширит, когда в ландшафтном режиме и сокращается немного в портрете.

Есть идеи?

Answer 1

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

Я не уверен, какие технологии вы смотрите, но CSS3 дает именно то, что вы хотите с CSS3 медиа запросы.

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

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

Проверить Этот пример страницы Для получения более объяснения или Вот этот.

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

Answer 2

Вы можете сделать это с помощью функции CSS Media «Ориентация». Таким образом, вы можете указать стили в зависимости от ориентации экрана, не связанного с размером экрана. Вы можете найти официальное определение W3.org об этой функции СМИ здесь. Отказ В сочетании с спецификациями на Developer.mozilla.org. Это объяснит, как это работает.

---

Цитата из w3.org О функции «Ориентация».

Функция «Ориентационная» функция «Портрет», когда значение «высота«Медиа» больше или равно к ценностиширина«СМИ». В противном случае «ориентация» - «ландшафт».

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

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

---

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

Jsfiddle Demo. (Попробуйте изменить размер порта View)

Вот представительные средства массовой информации, влияющие на портретный и ландшафтный ориентацию.

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

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

 }