Заказ <div>в соответствии с ориентацией экрана / окна

Question

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

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

 ----------------  ----------------
|                ||                 |
|                ||                 |
|                ||                 |
|      div1      ||      div2       |
|                ||                 |
|                ||                 |
|                ||                 |
 ----------------  -----------------

когда они находятся в вертикальном положении, например:

 ---------------- 
|                |
|                |
|                |
|      div1      |
|                |
|                |
|                |
 ---------------- 
 ---------------- 
|                |
|                |
|                |
|      div2      |
|                |
|                |
|                |
 ---------------- 

Мне бы очень хотелось услышать ваше мнение.

Answer 1

Используйте медиа-запрос CSS!

Позволяет указать, какой CSS вы хотите применить при определенных условиях (в данном случае это изменение размеров окна).

Проверьте эту ссылку:

http://css -tricks.com / сниппеты / CSS / медиа-запросы-для нестандартных-устройств /

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

Пример использования:

@media screen and (max-width: 980px) { ...css... }

Вышеприведенное утверждение означает, что для всех разрешений до 980 пикселей применяется этот стиль. Если вы делаете что-то вроде:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { ...css... }

Это будет применять данный CSS для всех разрешений от 320 до 480 пикселей.

Аналогичным образом, только применение минимальной ширины XX будет применять данный CSS для всех разрешений XX и выше.

Answer 2

Просто плавайте их, если экран слишком узкий, они будут выпадать соответственно.

div {
    float:left;
}

Если вы хотите, чтобы они складывались только для мобильных устройств. определите свой мобильный браузер и добавьте .mobile к своему телу или полностью загрузите мобильный CSS-файл.

div {
    float:left;
}

.mobile div {
    clear:both;
}