Преодоление свойств, определенных JavaScript, с использованием медиа-запросов

Я устанавливаю высоту и ширину DIV, вычисляя свойства window.height и window.width, а затем присваивая значения DIV. Теперь DIV занимает всю область просмотра браузера.

Теперь я хочу переопределить эти размеры с помощью медиа-запросов, когда пользователь изменяет размер окна. На меньшем экране я хочу установить высоту и ширину DIV на меньший размер, чем высота и ширина окна?

Это возможно? Могут ли высота и ширина, установленные с помощью JavaScript, быть переопределены медиа-запросами?


person b-marls    schedule 12.01.2012    source источник
comment
Что именно вы подразумеваете под медиа-запросами?   -  person casablanca    schedule 12.01.2012
comment
webdesignerwall.com/tutorials/css3-media-queries   -  person b-marls    schedule 12.01.2012
comment
То, что вы когда-либо назначали непосредственно DIV через JavaScript или встроенный стиль, не будет переопределено внешним CSS или, в вашем случае, медиа-запросами. Я рекомендую вам поместить свою логику в CSS с абсолютным позиционированием с помощью медиа-запросов или просто сделать все это в JS. Надеюсь, это поможет.   -  person Qorbani    schedule 12.01.2012


Ответы (1)


Пока вы сохраняете свои медиа-запросы довольно простыми, вы можете сделать простой оператор javascript if/else.

 if (screen.width < 480) {
     // Set some variables
 } else {
     // Set other variables
 }

Другой вариант — более новый window.matchMedia API.

person Brett DeWoody    schedule 12.01.2012