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

Answer 2

如果使用CSS3是一个选项，mediaqueries将以更好的方式为您执行此操作。 http://www.w3.org/TR/css3-mediaqueries/#width

示例：

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="/css/default.css" />

Answer 3

尽管您可能无法专门为CSS3编写代码，但QuirksMode有一篇关于将Javascript与媒体查询结合使用以保持标准的优秀文章： http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

还有一个jQuery插件，可以为所有浏览器提供媒体查询：project site | jquery site

尝试根据浏览器宽度添加css。需要帮助（jQuery）

3 个答案: