Определить разрешение экрана и изменить макет

Question

Определить разрешение экрана и изменить макет

0

Мне нужно проверить, является ли разрешение пользователя <1300px или> 1300px, и если он загружает макет с горизонтальными divs и загружает макет с вертикальными divs, то есть 1300px.

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

Поскольку я не могу это сделать с PHP, мне нужно сделать это с помощью javascript, поэтому мне придется использовать функцию "load", чтобы загрузить часть моего шаблона, где находится вертикальный или горизонтальный div? Я использую структуру Yii

FosAvance 05 янв. 2014, в 16:51

Источник

1

Нет. Вам нужно использовать медиазапросы CSS.
SLaks 05 янв. 2014, в 15:05
0

Мне любопытно, что вы хотите сделать, когда это 1300? Вы сказали, что вы хотите для <1300 и> 1300 ... ;-)
T.J. Crowder 05 янв. 2014, в 17:41
0

положить div в разных местах.
FosAvance 05 янв. 2014, в 19:34

Показать ещё 1 комментарий

Теги:

javascript

html

css

3 ответа

1

В JavaScript вы можете обнаружить это путем:

window.screen.availHeight
window.screen.availWidth

в то время как в CSS вам нужно использовать медиа-запросы:

@media screen and (min-width: 1200px)

Zaheer Ahmed 05 янв. 2014, в 12:44

1

Обычно такое происходит в домене CSS (через медиа-запросы), а не в домене JavaScript.

Однако вы можете использовать screen объект, чтобы получить размеры экрана пользователя:

var width = screen.width; // Or screen.availWidth;

T.J. Crowder 05 янв. 2014, в 12:07

Ещё вопросы

Нет. Вам нужно использовать медиазапросы CSS.
Мне любопытно, что вы хотите сделать, когда это 1300? Вы сказали, что вы хотите для <1300 и> 1300 ... ;-)

Guicara · Accepted Answer · 2014-01-05T13-42-00.000Z

Для этого вы можете использовать CSS-запрос:

// For screen < 1300px
@media screen and (max-width: 1300px) {
    .foo {
        ...
    }
}

// For screen > 1300px
@media screen and (min-width: 1300px) {
    .foo {
        ...
    }
}