我是一名初级前端开发人员，刚刚开始研究响应式设计。虽然媒体查询的想法让我很兴奋，但如果没有足够的断点会发生什么？
在大多数情况下，您可以假设某人拥有 iPhone 或 iPad，但其他平板电脑和手机以及不同的 Mac/PC 屏幕尺寸呢？为每个屏幕尺寸编写媒体查询将是一项疯狂的任务。
那么，是否有另一种方法可以在没有媒体查询的情况下完成响应式设计？还是我误解了如何使用媒体查询？
问问题
559 次
3 回答
7
我不确定你在寻找什么样的替代方案。“响应式设计”是指“响应其环境的设计”。要做到这一点，你需要一些能让你说“如果环境是 X，做 Y”的东西。这就是媒体查询的作用。
为每种屏幕尺寸编写媒体查询将是一项疯狂的任务
这将是！那不是这个主意。网络不是那样工作的。HTML 及其布局系统被设计为在几乎任何设备上都可以查看，运行各种不同的软件（网络浏览器、屏幕阅读器、盲文显示器、搜索引擎爬虫等）。
例如：默认情况下，块级元素占用可用的水平空间。您不需要为每个可能的屏幕尺寸编写媒体查询来让他们这样做，他们只是这样做。
布局的断点应该更多地基于布局的内容，而不是不同设备的大小。有几篇很好的文章概述了这种方法：
- http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
- http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
- http://www.markboulton.co.uk/journal/theinbetween
如果您正在为每个稍微不同的屏幕尺寸编写新样式，那么您可能做错了。
您可以查看流行设备的屏幕尺寸来为您的设计决策提供依据，但 Wikipedia 已经列出了这些，并且随着新设备的问世，未来将继续这样做。
制作一个适用于许多不同视口的设计并不容易，但这并不是因为媒体查询是如何工作的。这本身就是一项艰巨的任务。
于 2013-07-20T16:02:17.423 回答
2
只需选择对您来说可管理的中断选择（例如 4 个），然后对具有流畅设计的那些进行编码，以便您的内容扩展至大小，直到到达下一个中断，然后跳转到下一个布局。
例如，如果您选择在 320、480、800 和 1024 处设置宽度中断，则可以在 320 处设置最小宽度，以防止出现更小的设备（不确定是什么）时内容变小。如果出现宽度为 640 的设备，它将使用 480 中断和居中或使用流体（基于 % 大小而不是 px 的 CSS），因此内容会扩展以填充可用的额外空间。
在此示例中，大于 1024 的任何内容（主要是台式机和更高规格的平板电脑/手机）都将使用最后一个中断。实际上，这是您在开发过程中大部分时间都会看到的。
于 2013-07-20T15:17:33.213 回答
0
我们在我们的项目中使用 Adapt.js，它对我们来说非常好。我们有四个断点：移动设备、平板电脑、笔记本电脑和台式机。
我们选择不使用媒体查询，因为我们必须支持 IE8，并且不想为 CSS3 功能使用 polyfills。一探究竟。
于 2013-07-20T15:45:43.317 回答