<分区>
我愿意做出类似的东西TNW已经完成了。如果您在屏幕上看到 < 900px,它会隐藏侧栏导航并显示向下滑动的选项。我知道他们正在使用媒体查询,但 css 对我来说看起来又大又复杂,而且我不确定它是仅在媒体查询的帮助下完成所有操作还是在使用浏览器调整大小选项。
什么是极简主义又容易实现的这个选项。我唯一的任务是为小于 800 像素的屏幕显示此选项
最佳答案
@Ani 在一些事情上是正确的。一定要确保您有视口(viewport)标签,当然还要使用媒体查询来控制各种视口(viewport)宽度的 CSS。
然而,你真的不需要他们发布的JS。使用 .resize
也不是最好的主意。相反,使用类似 mediaCheck 的东西使用 matchMedia在引擎盖下根据媒体查询有条件地执行 JS。如果您必须使用 .resize
进行某些操作,请使用类似 Cowboy's Throttle plugin 的内容因为每个浏览器处理 resize
事件的方式不同。
有关实现 Canvas 外导航(如 TNW)的精彩教程是 over at Smashing Mag .本质上,使用 min-width
查询(从最小到最大)构建您的样式,并且仅使用 JS 来管理特定断点处的导航状态。
关于css - 响应式侧边栏 - 如何实现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17301729/