Изменение CSS в прямом эфире на основе ширины страницы

Я пытаюсь добавить определенные стили на страницу в зависимости от текущей ширины страницы. Я хочу, чтобы это работало вживую. Например, при просмотре на iPhone и при повороте экрана при просмотре уже загруженной страницы, css изменится. Кроме того, я бы идеально хотел использовать мобильную библиотеку jquery. Заранее спасибо за помощь. Вот то, что я до сих пор, не похоже на работу, я попытался с помощью LiveQuery также и что не работает либоИзменение CSS в прямом эфире на основе ширины страницы

$(function() { 
    $(document).live('css_init', function() { 
      if (($(window).width()) > 430) { 
       $('#main_panels .next').addClass("next-wide"); 
       $('#main_panels .prev').addClass("prev-wide"); 

      }; 
     }); 
     $(document).trigger('css_init'); 
});

источник

2012-02-10 pbal

Считаете ли вы медиа-запросы? –

Стоп прямо сейчас, выберите все и нажмите Backspace/удалить клавишу на клавиатуре ,

Теперь, когда ужас этого исчез, позвольте представить вам Media Queries. Это полностью поддерживается всеми современными мобильными устройствами (т. Е. Вещами с полными веб-браузерами, а не с WAP-порталами). Он также широко поддерживается уже в современных настольных браузерах. Единственным исключением является IE < 9, и для этого у вас есть Respond.js.

Теперь, идите и купайтесь в славе веб-стандартов.

источник

2012-02-10 22:02:29

+1 к тому, как вы объяснили :) – ShankarSangoli

Работает в Safari на моем ПК, но не работает на моих мобильных устройствах. Это необходимо для обновления CSS в реальном времени, а не только при загрузке. – pbal

Медиа-запросы обновляются в реальном времени. Если это не так, то есть проблема с запросами, которые вы используете, или у вашего конкретного мобильного устройства/мобильного браузера есть некоторая ошибка. Помните также, что некоторые устройства сообщают ширину и ширину устройства по-другому, чем другие. Кроме того, ширина устройства не зависит от ориентации на некоторых устройствах, то есть ширина устройства - ширина устройства - это ширина устройства, несмотря на то, что вы держите его. Может потребоваться некоторое тестирование и настройка, чтобы ваши запросы работали точно так, как вы ожидаете, но добро пожаловать в Интернет. –

Вы могли бы использовать прослушиватель событий jquery resize?

myFunction() { 
    var w = $(window).width(); 
    if (w > 430){ 
     // do stuff 
    }; 
} 
$(window).resize(function(){ 
    myFunction(); 
}

источник

2012-02-10 22:03:18

Запросы CSS Media должны делать то, что вы хотите, без javascript.

попробовать что-то вроде этого:

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

Вы можете добавить несколько жестких резолюции контрсил, но тот легко сделать.

http://css-tricks.com/css-media-queries/

источник

2012-02-10 22:05:20 Hersha

Изменение CSS в прямом эфире на основе ширины страницы

ответ

Смежные вопросы