Question

var $ = jQuery.noConflict();
$(document).ready(function() {
if ((screen.width>=1024)) {
$('link[title=theme800]')[0].disabled=true;
$('link[title=theme]')[0].disabled=false;
}
if ((screen.width<1024)) {
$('link[title=theme]')[0].disabled=true;
$('link[title=theme800]')[0].disabled=false;
}
});

我的html页面：

<link title = "theme" rel="stylesheet" type="text/css" media="all" href="theme.css" />
<link title = "theme800" rel="stylesheet" type="text/css" media="all" href="theme800.css" />

好的，我正在测试不同屏幕尺寸的网站。出于某种原因，当我处于'＆lt; 1024'模式时，第二个样式表（theme800）没有在IE和Chrome中加载，它适用于Firefox。我确实给了一切头衔和一切。同样，它适用于Firefox，但在其他浏览器中它不起作用。如何在其他浏览器中使用它？救命啊！

感谢。

Answer 1

根据您的情况使用css媒体查询可能会好得多

Answer 2

由于CSS media queries尚未得到广泛支持，您还可以考虑动态加载样式表。根据{{3}}，您可以尝试：

<script type="text/javascript">
    function load_stylesheet(file_name) {
         // Create the stylesheet
        var css_file = document.createElement('link');
        css_file.setAttribute('rel', 'stylesheet');
        css_file.setAttribute('type', 'text/css');
        css_file.setAttribute('href', file_name);
         // Append the stylesheet to the document
        document.getElementsByTagName('head')[0].appendChild(css_file);
    }

    if (screen.width >= 1024) {
        load_stylesheet('theme.css');
    } else {
        load_stylesheet('theme800.css');
    }
</script>

请注意，这不是故意使用jQuery，因此可以尽快加载样式表，而无需等待首先加载jQuery。否则，用户可能会有明显的延迟，在此期间内容将显示为裸露且没有样式。

屏幕调整大小后启用样式表？不适用于IE和Chrome

2 个答案: