css - 响应式侧边栏 - 如何实现?

标签 css web responsive-design

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我愿意做出类似的东西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/

上一篇:html - 无论内容的长度如何,我如何均匀地定位内容?

下一篇:html - 文本框内右侧的按钮(这是最好的方法吗?)

相关文章:

php - 如何从 wordpress 根文件夹的 web.config 文件中删除 .php 扩展名?

css - 缩放时页面上的图像和元素未正确调整

javascript - Node.js Web 应用程序的国际化 (i18n)/本地化

html - 多个 Bootstrap 表上的垂直对齐问题

javascript - 如何在第二页加载前显示一个 div 一段时间

css - 少@import : Passing paths to lessc

javascript - 更改标题在 amcharts 中的位置

html - 如何在 IE 中将 div float 在屏幕底部?

javascript - picturefill.js 问题与 z-index

javascript - 响应式 JavaScript – 加载/隐藏与浏览器宽度相关的特定功能?