根據視口大小切換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樣式表

回答

相關問題