jquery - 通过 jQuery 更改 CSS 文件

Question

我正在尝试使用.resize()使用 jQuery 更改页面上的 CSS 文件。

我花了几个小时试图弄清楚，现在我需要帮助。

$(document).ready(function(){
    $(window).resize(function(){
        var w = $(window).width();
        if(w < '640px')
        {
            $('#pcss').attr('href', 'css/pagestyle640.css');
        }
        else if(w > '640px')
        {
            $('#pcss').attr('href', 'css/pagestyle.css');
        }
    });
});

Answer 1

请查看jQuery API。.width 方法返回一个数字。我相信您在这里遇到了将数字与字符串进行比较的问题：

if(w < '640px')

你会更好：

if(w < 640)

Answer 2

您要使用的是Media Queries。您可以在没有 javascript 行的情况下完成所有这些操作。

您可以添加样式表，例如：

<link rel="stylesheet" media="screen and (max-width: 640px)" />

这只会在屏幕窄于 640 像素时应用。

至于旧版浏览器支持，您可以使用这个 polyfill：https ://github.com/scottjehl/Respond 还有一个非常漂亮且简单的演示页面。