jQuery CSS 媒体查询作为浏览器调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5187390/
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
CSS Media Queries as Browser Resizes?
提问by Jiew Meng
I think CSS media queries does not work as user resizes the browser? The user will have to refresh the page for the media query to take effect? How can I update the media query perhaps with JS? currently I use JS to detect window size on resize add addClass()
我认为 CSS 媒体查询在用户调整浏览器大小时不起作用？用户必须刷新页面才能使媒体查询生效？如何使用 JS 更新媒体查询？目前我使用 JS 在调整大小添加时检测窗口大小addClass()
回答by Dan
You don't need JS for MediaQueries to work or to detect the screen size/view port. Also, you do not need to refresh your browser for the result of a MediaQuery to take place.
您不需要 JS 来让 MediaQueries 工作或检测屏幕大小/视口。此外，您无需刷新浏览器即可获得 MediaQuery 的结果。
Take a look at this article for detailed information and 'How to' for using MediaQueries:
查看这篇文章以获取详细信息和“如何”使用 MediaQueries：
Probably the easiest way to achieve this is to supply separate MediaQueries in the head of your HTML:
实现这一点的最简单方法可能是在 HTML 的头部提供单独的 MediaQueries：
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="/css/small-device.css" />
You can also use MediaQueries within your main stylesheet:
您还可以在主样式表中使用 MediaQueries：
@media screen and (max-width: 350px) { /* -- If the view port is less than 350px wide (portrait on phone) then display the following styles -- */
.content{
padding:6px;
}
}
I would highly recommended taking the time to read through the above article to get a better understanding of MediaQueries. Once you understand how to best use them, you will find them invaluable!
我强烈建议您花时间通读以上文章，以更好地了解 MediaQueries。一旦您了解了如何最好地使用它们，您就会发现它们是无价的！
