Высота медиа-запросов CSS больше ширины и наоборот (или как имитировать с помощью JavaScript)

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

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

Я пытаюсь в полной мере использовать широкие экраны, а также ориентации и т.д. Если кто-нибудь знает, как это сделать с помощью медиа-запросов или javascript, дайте мне знать!

Ответ 1

Я уверен, что у вас это есть, но вот пример для других, которые проходят мимо. Как и предыдущий человек, люди должны тратить время на это: http://www.w3.org/TR/css3-mediaqueries/

Теперь, вот ответ. Вы можете поместить "пейзаж" или "портрет" в сочетании с шириной и высотой в правилах @media. Это предполагает, что высота больше ширины и наоборот. Обычно я использую только min-width, а затем имею несколько отдельных правил @media для них. Одним из примеров может быть пейзаж: горизонтальная прокрутка (рабочий стол) и портрет: регулярная вертикальная (планшет/телефон)

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

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

}


/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

}

ЗДЕСЬ jsfiddle - обратите внимание, что размер окна: border-box; используется для устранения неполадок.

2017 ОБНОВЛЕНИЕ

Я думаю, что большинство людей будут использовать flexbox сейчас: https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}

Ответ 2

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

http://www.w3.org/TR/css3-mediaqueries/

Но вы можете найти следующий учебник полезным (Google for: Media Queries Tutorial):

http://webdesignerwall.com/tutorials/css3-media-queries

Как только вы подберете основы, делающие такие вещи, как скрытие элементов, если экран падает ниже определенного разрешения:

@media screen and (max-width: 600px)
{
  .sidebar
  {
    display: none;
  }
}

Надеюсь, что это поможет.