如果屏幕分辨率小于x append css

joh*_*ohn 14 css jquery

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

我的代码没有工作,没有看到firebug中的任何错误.

<script type="text/javascript">
jQuery(window).resize(function() {
  if (jQuery(window).width() < 960) {
    jQuery(".snow").css('display', 'none');
  }
});
</script>
Run Code Online (Sandbox Code Playgroud)

ACa*_*ter 51

您可以使用该@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
Run Code Online (Sandbox Code Playgroud)

看到这里

Jason Whitted提出了一个很好的观点,这只是CSS 3,所以它不适用于旧浏览器(它应该适用于所有现代浏览器).请参阅此处了解兼容性 你的主要问题将是IE 8及更少.

编辑 - 设备选择

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices
Run Code Online (Sandbox Code Playgroud)

或者你可以假设移动设备的宽度会更小,然后继续.

  • 这确实需要符合CSS3标准的浏览器,但这是一个理想的解决方案. (2认同)
  • 请注意,如果您正在使用某种流畅的响应式网站,由于滚动条,js宽度和媒体查询宽度会有所不同.如果需要,您可能需要同步它 (2认同)