0

我创建了 4 个不同的 .css 文件来处理不同的分辨率。

这是我用来根据屏幕宽度加载文件的 jquery 代码。

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="public/_css/normal.css" />

<script language="javascript" type="text/javascript">
function adjustStyle(width) 
{
    width = parseInt(width);
    if(width >= 1920) 
    {
        $("#size-stylesheet").attr("href", "public/_css/bigger.css");
    }
    else if (width >= 1600) 
    {
        $("#size-stylesheet").attr("href", "public/_css/big.css");
    }
    else if (width >= 1366) 
    {
        $("#size-stylesheet").attr("href", "public/_css/normal.css");
    }
    else 
    {
        $("#size-stylesheet").attr("href", "public/_css/small.css");
    }
}

$(function() 
{
    adjustStyle($(this).width());

    $(window).resize(function() 
    {
        adjustStyle($(this).width());
    });
});
</script>

当我在 chrome 上测试页面时，每次我调整窗口大小时，它都会像疯了一样闪烁。奇怪的是它在 IE8 和 firefox 上运行得非常好。

这是页面的工作示例；

测试页面

我有一种感觉，每次我调整窗口大小时，它都会一遍又一遍地加载 css 文件。

调整窗口大小时加载css文件也需要一些时间，所以可以预先加载它们吗？

4

2 回答 2

3

您的行为参差不齐，因为浏览器不应该在window.onresize. 此事件每秒可触发数百次，您绝对不希望一直请求、服务、下载和解析 100 个 AJAX 请求的队列。

我强烈推荐使用媒体查询，并且由于您已经对使用 Javascript 持开放态度，您可能对使用 IE6-8 的CSS3 媒体查询 polyfill 感兴趣。

它更具前瞻性，当您不再需要支持这些旧版浏览器时，您所要做的就是停止使用 polyfill，而不是第二次将所有内容转换为“正确的”CSS。

于 2013-08-18T11:30:36.393 回答
0

如果出现以下情况，请尝试为每个条件添加另一个条件：

if(width >= 1920 && !$("#size-stylesheet").attr("href") === "public/_css/bigger.css") 
    {
        $("#size-stylesheet").attr("href", "public/_css/bigger.css");
    }
    else if (width >= 1600 && !$("#size-stylesheet").attr("href") === "public/_css/big.css") 
    {
        $("#size-stylesheet").attr("href", "public/_css/big.css");
    }
    ...

这样，您只需更换一次 CSS，而不是每次调整大小时

于 2013-08-18T11:33:49.087 回答