jquery - 尝试根据浏览器宽度添加CSS。需要帮助 (jQuery)

Question

我正在尝试根据浏览器宽度添加一个 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" />');
    }

有什么想法吗？

Answer 1

问题是 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') 的长度进行不必要的检查.