Попытка добавить CSS в зависимости от ширины браузера.Нужна помощь (jQuery) - PullRequest
Новая
       14

Попытка добавить CSS в зависимости от ширины браузера.Нужна помощь (jQuery)

1 голос
/ 11 января 2011

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

В этом случае, если окно браузера больше ширины 1200, оно добавит CSSфайл.Я знаю, как это сделать, чтобы он работал с обновлением, но я хочу, чтобы при изменении размера браузера, когда он активен на странице, файл CSS изменился.

Вот то, что у меня есть на данный момент, явероятно, я иду не в ту сторону: я не слишком уверен: 

<link rel="stylesheet" type="text/css" id="smallS" href="<?php bloginfo('template_directory'); ?>/css/default-960.css" /> 
<script>
    $(function(){
        $(window).resize(function(){
            var w = $(window).width();
            if (w > '1200') {
                document.write('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
            }
            else {
                if($('#largeS').length > 0) {
                    $('#largeS').remove();
                }
            }
        });
    });
</script>

Это то, что у меня было раньше, но это не то, что я хочу сделать: 

if ((screen.width>=1024))
    {
        document.write('<link rel="stylesheet" type="text/css"  href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
    }

Есть мысли?

Ответы [ 3 ]

2 голосов
/ 11 января 2011

Если опция CSS3 является опцией, медиазапросы сделают это для вас гораздо приятнее. http://www.w3.org/TR/css3-mediaqueries/#width

Пример: 

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="/css/default.css" />
2 голосов
/ 11 января 2011

Проблема в том, что document.write работает только при первом разборе документа, а не позже. Вам нужно использовать функции манипуляции DOM. Поскольку вы используете jQuery, это значительно упрощается: 

$(window).resize(function(){
    if ($(window).width() > 1200) {
        if (!$('#largeS').length) {
            $('head').append('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
        }
    }
    else {
        $('#largeS').remove();
    }
}).trigger('resize'); // invoke the handler immediately

Обратите внимание, что здесь используется $('head').append() и не выполняется ненужная проверка длины $('#largeS').

1 голос
/ 12 января 2011

Несмотря на то, что вы, возможно, не сможете кодировать специально для CSS3, в QuirksMode есть отличная статья об использовании Javascript с медиазапросами с учетом стандартов: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

Существует также плагин jQuery, который выполняет медиазапросыдоступно для всех браузеров: Сайт проекта | jquery site

...