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

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

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

Я пытаюсь в полной мере использовать преимущества широких экранов, ориентаций и тому подобного. Как это сделать с помощью медиа-запросов или JavaScript?

Ответы на вопрос(2)

Решение Вопроса

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

Nowвот ответ. Вы можете поставить "Пейзаж" или "портрет" в сочетании с шириной и высотой в ваших правилах @media. Это предполагает, что высота больше, чем ширина, и наоборот. Я обычно использую только минимальную ширину, а затем у меня есть несколько отдельных правил @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 - обратите внимание, что размер ящика: граница-поле; используется для заполнения вопросов.

2017 UPDATE

Я думаю, что большинство людей будет использовать 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..." */
  }
}

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

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;
  }
}

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

Ваш ответ на вопрос