响应式设计是如何工作的？答案

【问题标题】：how does responsive design work?响应式设计是如何工作的？
【发布时间】：2015-06-23 08:38:49
【问题描述】：

查看了几十篇文章后，我仍然不知道如何实际实现响应式用户体验设计（我真的了解布局部分）。一个简单的例子：Bootstrap（CSS 框架）在手机上将工具栏按钮折叠成一个下拉按钮。这就是我所需要的！我想了解这种行为的基础知识。它只需要 CSS，还是我也需要 JavaScript？除了 JavaScript，我实际上不知道任何其他方式。

在我的应用程序 (IDE) 中，我通常有很多工具栏按钮，并且在某个断点或宽度处，我想我必须以一种或另一种方式将它们放入下拉按钮中，对吧？显而易见的事情，例如每个断点/宽度重新排列布局容器对于 CSS 来说是小菜一碟；至少看起来是这样的。

更新，我只使用基于 JS 的小部件。主要是生成所有的 HTML。

【问题讨论】：

Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques 的可能重复项
您正在寻找媒体查询。
@TAOP 不是真的，这正是我可以从任何博客中获得的。不告诉我必须做什么重新排列或转换小部件；但感谢您的提示！
@SLAks：媒体查询不会从多个工具栏按钮（或其他下拉菜单）中构建下拉按钮。

标签： javascript html css

【解决方案1】：

您可以制作多个（针对不同屏幕尺寸的）菜单、下拉菜单或导航栏等。然后使用媒体查询仅在特定屏幕宽度上显示其中一个（例如，display: none 用于其他屏幕）。而且我认为 Bootstrap 的工作方式类似（它也可能使用 JS）。

通过这种方式，您的设计将变得具有响应性，尽管它会增加文件大小。

【讨论】：

【解决方案2】：

检查网格。这是响应式设计的（很棒的）简单指南。

http://adamkaplan.me/grid/

【讨论】：

谢谢，我得到了布局部分，但我仍然不知道如何管理我的小部件，即：将它们折叠成更小的东西。
@mc007 检查 CSS 媒体查询。您可以使用它们根据例如屏幕大小来更改小部件的宽度。 developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
谢谢，我的小部件都已经减少到最低限度（32 或 16 个字体图标）；我不能让它们变小:-)

【解决方案3】：

经过大量的研发；对于基于 JS 的解决方案，基本上没有任何标准。我检查了 Dojo、Sencha 和其他一些付费的东西。最后，我确实得到了自定义 JS 代码。媒体查询仅在一定程度上有所帮助，实际上只是在移动和调整布局容器和图片时；但仅此而已。仅在 JS 中执行此操作会更好，因为计算变得更加准确并且对代码的干扰更少。

所以对我来说，“响应式设计”实际上根本没有意义；它非常适合常规网站，但实际上不适用于复杂的用户体验。

回到第一格， g

【讨论】：