1 
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" />

好的，我正在以不同的屏幕尺寸测试我的网站。出于某种原因，当我处于“<1024”模式时，第二个样式表（theme800）没有在 IE 和 Chrome 中加载，它适用于 Firefox。我确实给了一切标题和一切。同样，它在 Firefox 中有效，但在其他浏览器中无效。如何让它在其他浏览器中工作？帮助！

谢谢。

4

2 回答 2

0

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

于 2013-01-06T01:29:33.113 回答
0

由于CSS 媒体查询尚未得到广泛支持，您还可以考虑动态加载样式表。基于此示例，您可以尝试：

<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 先加载。否则，用户可能会出现明显的延迟，在此期间内容会显得空洞且没有样式。

于 2013-01-06T01:50:00.900 回答