根据视口大小切换CSS样式表

我已经按照CSS-Tricks的说明使用多个.css文件和jQuery根据视口宽度更改样式表，但我的代码无法正常工作。我坐在这里分析了一个小时，无法捕捉到我的错误。任何人都可以看到我做错了吗？提前感谢您提供的任何帮助！根据视口大小切换CSS样式表

function adjustStyle(width) { 
 
    width = parseInt(width); 
 
    if (width > 901) { 
 
    $("#size-stylesheet").attr("href", "large.css"); 
 
    } else { 
 
    $("#size-stylesheet").attr("href", "small.css"); 
 
    } 
 
} 
 

 
$(function() { 
 
    adjustStyle($(this).width()); 
 
    $(window).resize(function() { 
 
    adjustStyle($(this).width()); 
 
    }); 
 
});

body { 
 
\t background-image: url(large_pic.jpg); 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <title>Practice Responsiveness</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="large.css" /> 
 
\t \t <link id="size-stylesheet" rel="stylesheet" type="text/css" href="small.css" /> 
 
\t \t <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
 
\t \t <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
\t \t <script src="practice.js"></script> 
 
\t </head> 
 

 
\t <body> 
 
\t </body> 
 
</html>

来源

2016-02-19 MizzKFizzle

为什么不直接使用媒体查询？ – j08691

j08691，我也试过，并且无法使它工作！我是这个新手，所以一旦我弄清楚如何让jQuery解决方案工作，我将解决媒体查询解决方案...... – MizzKFizzle

@MizzKFizzle跳过jQuery部分;知识不会传输到媒体查询，媒体查询选项更好。 – Mathletics

您可以使用媒体属性：

<link rel="stylesheet" media="(max-width: 900px)" href="small.css" /> 
<link rel="stylesheet" media="(min-width: 901px)" href="large.css" />

见here

来源

2016-02-19 17:23:07 delueg

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#attr-media – JDB

好吧 - 让它工作，我现在可以看到这是最好的解决方案。谢谢你的帮助！ – MizzKFizzle

根据视口大小切换CSS样式表

回答

相关问题