Question

我目前正在构建一个投资组合网站，我希望侧边栏默认隐藏在移动设备上，因为它非常大，你可以在这里查看：www.dosh.dk/rofl/

如果正文有类＆＃34;侧边栏无效＆＃34;侧边栏将隐藏因此我想在加载网站时对视口进行单一检查，然后在X以下添加类

我正在使用coffeescript和ive制作了以下代码，但它似乎没有用，有什么想法吗？

$ ->
  $(".inner_content").hide()
  $("#myskills").show()
  $("#site").addClass 'loaded'

  if $(window).width < 600
     $("body").addClass 'sidebar-inactive'

Answer 1

使用CSS媒体查询的非JavaScript解决方案怎么样？

@media (max-width: 599px) {
  .sidebar {
    display: none;
  }
}

当屏幕宽度小于600px时，这将隐藏sidebar类的元素，并在浏览器调整大小时更新。

更多：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

检查侧载荷上的视口宽度，如果小于X，则将类添加到body

1 个答案: