[英]Switch CSS stylesheet based on viewport size
我已經按照CSS-Tricks上的說明使用多個.css文件和jQuery根據視口寬度更改樣式表，但是我的代碼無法正常工作。 我坐在這里分析了一個小時，無法捕捉到我的錯誤。 有人可以看到我在做什么嗎？ 預先感謝您提供的任何幫助！
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 { background-image: url(large_pic.jpg); }
<!DOCTYPE html> <html> <head> <title>Practice Responsiveness</title> <link rel="stylesheet" type="text/css" href="large.css" /> <link id="size-stylesheet" rel="stylesheet" type="text/css" href="small.css" /> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="practice.js"></script> </head> <body> </body> </html>
您可以使用media屬性：
<link rel="stylesheet" media="(max-width: 900px)" href="small.css" />
<link rel="stylesheet" media="(min-width: 901px)" href="large.css" />
看這里
我想定義一個 css 樣式表或添加一個主體 class 取決於視口大小
[英]I want to define a css stylesheet or add a body class dependant on viewport size
jQuery + CSS根據視口寬度大小顯示/隱藏表格元素
[英]Jquery + CSS to show/hide table elements based on viewport width size
如何使用JavaScript和CSS Grid根據屏幕/視口大小使RadWindow響應
[英]How to make a RadWindow responsive based on screen / viewport size using JavaScript and CSS Grid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.