Javascript 如何根据浏览器宽度动态调整 css 样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11962837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I dynamically adjust css stylesheet based on browser width?
提问by Sean McGowan
We're developing an open-source web app for arts teachers across the world to work together. We need a nice website that simply adjusts itself based on the active width of the browser, like google.org or barackobama.com does so well.
我们正在开发一个开源网络应用程序，供世界各地的艺术教师一起工作。我们需要一个很好的网站，它可以根据浏览器的活动宽度自行调整，例如 google.org 或 barackobama.com 做得很好。
We can detect the browser, the OS, etc. but don't want to use any of that info. We just want four or five different stylesheets that are triggered when the browser width is adjusted.
我们可以检测浏览器、操作系统等，但不想使用任何这些信息。我们只需要在调整浏览器宽度时触发四到五个不同的样式表。
So, for example, when you visit the app on a browser using a DESKTOP computer, you see the full app when the browser is full screen. Then, as the browser reduces its width the site immediately and dynamically changes its format to allow for universal compatibility.
因此，例如，当您使用桌面计算机在浏览器上访问应用程序时，当浏览器全屏显示时，您会看到完整的应用程序。然后，当浏览器减小其宽度时，站点会立即动态更改其格式以实现通用兼容性。
We don't want our CSS to change based on browser type or original width, but instead want it to adjust ever millisecond based on the current width of the viewport -- regardless of whether or not it is a "mobile" device or a "tablet" machine or a "desktop" browser.
我们不希望我们的 CSS 根据浏览器类型或原始宽度而改变，而是希望它根据视口的当前宽度每毫秒调整一次——无论它是“移动”设备还是“平板电脑”机器或“桌面”浏览器。
Curiously, I'm using Google Apps Script to host our web app, so it looks like any meta viewport tags are removed.
奇怪的是，我使用 Google Apps Script 来托管我们的网络应用程序，所以看起来所有元视口标签都被删除了。
How can we introduce four or five different stylesheets based on the width of the current viewing browser window?
我们如何根据当前查看浏览器窗口的宽度引入四到五个不同的样式表？
回答by jeff
You can either use CSS media queries, like so:
您可以使用 CSS 媒体查询，如下所示：
<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/wide.css" />
Or jQuery, like so:
或者 jQuery，像这样：
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
Both found from: http://css-tricks.com/resolution-specific-stylesheets/
两者都来自：http: //css-tricks.com/resolution-specific-stylesheets/
回答by t q
css media queries is the way to go
css媒体查询是要走的路
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
回答by John Conde
Use CSS media queriesto do this
使用CSS 媒体查询来做到这一点
回答by cksahu
You can do with CSS.
你可以用 CSS 来做。
<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/pc.css' />
For more code & detail
有关更多代码和详细信息
