jQuery 如果屏幕分辨率小于 x 追加 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13979443/
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
if screen resolution is less than x append css
提问by john
Trying to modify the css of an element if the screen resolution is less than 960px
如果屏幕分辨率小于 960 像素，则尝试修改元素的 css
my code isn't working, not seeing any errors in firebug.
我的代码不起作用，在萤火虫中没有看到任何错误。
<script type="text/javascript">
jQuery(window).resize(function() {
if (jQuery(window).width() < 960) {
jQuery(".snow").css('display', 'none');
}
});
</script>
回答by ACarter
You can do this entirely with CSS using the @mediacommand.
您可以使用该@media命令完全使用 CSS 来完成此操作。
@media (max-width:960px) { css... } //nothing with screen size bigger than 960px
@media (min-width:960px) { css... } //nothing with screen size smaller than 960px
See here
看这里
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though). See herefor compatibility. Your main problems will be IE 8 and less.
Jason Whitted 提出了一个很好的观点，这只是 CSS 3，所以它不适用于旧浏览器（尽管它应该适用于所有现代浏览器）。请参阅此处了解兼容性。您的主要问题将是 IE 8 及更少。
Edit - device selection
编辑 - 设备选择
@media screen { .nomobile { display: block; } } //desktops/laptops
@media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.
或者你可以假设移动设备的宽度会更小，然后继续。
