如果屏幕分辨率小于x，请附加CSS [英] if screen resolution is less than x append css

问题描述

如果屏幕分辨率小于960px，则尝试修改元素的CSS

Trying to modify the css of an element if the screen resolution is less than 960px

我的代码无法正常工作，在萤火虫中看不到任何错误.

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>

推荐答案

您可以使用@media命令完全使用CSS进行此操作.

You can do this entirely with CSS using the @media command.

@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px

请参见此处

Jason Whitted很好地指出了这一点，它仅是CSS 3，因此它不适用于较旧的浏览器(尽管它应该适用于所有现代浏览器).有关兼容性，请参见此处.您的主要问题将是IE 8及以下版本.

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 here for compatibility. Your main problems will be IE 8 and less.

编辑-设备选择

@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.

这篇关于如果屏幕分辨率小于x，请附加CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！