Изменение CSS в реальном времени в зависимости от ширины страницы

Question

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

$(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');
});

Answer 1

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

Теперь, когда ужас исчез, позвольте мне представить вам Медиа-запросы .Это полностью поддерживается на всех современных мобильных устройствах (то есть с полноценными веб-браузерами, а не с WAP-порталами).Это также широко поддерживается уже в современных настольных браузерах.Единственное исключение - IE <9, и для этого у вас есть <a href="https://github.com/scottjehl/Respond"> Respond.js .

Теперь иди и наслаждайся славой веб-стандартов.

Answer 2

CSS Media Queries должны делать то, что вы хотите без JavaScript.

Попробуйте что-то вроде этого:

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

Возможно, вы захотите добавить некоторые жесткие разрешения ограниченияно это легко сделать.

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

Answer 3

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

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