我是不是必须为可以查看我的网站的每个屏幕尺寸编写媒体查询，或者是不是有替代方案？

Posted 2023-03-06

【中文标题】我是不是必须为可以查看我的网站的每个屏幕尺寸编写媒体查询，或者是不是有替代方案？

【英文标题】：Do I have to write media queries for every screen size my site could be viewed in, or is there an alternative?我是否必须为可以查看我的网站的每个屏幕尺寸编写媒体查询，或者是否有替代方案？

【发布时间】：2013-07-19 18:24:03

【问题描述】：

我是一名初级前端开发人员，刚刚开始研究响应式设计。虽然媒体查询的想法让我很兴奋，但如果没有足够的断点会发生什么？

在大多数情况下，您可以假设某人拥有 iPhone 或 iPad，但其他平板电脑和手机以及不同的 Mac/PC 屏幕尺寸呢？为每个屏幕尺寸编写媒体查询将是一项疯狂的任务。

那么，有没有其他方法可以在没有媒体查询的情况下完成响应式设计？还是我误解了如何使用媒体查询？

【问题讨论】：

别无他法/虽然你可以检查this out

@mr.alien 谢谢！但是我如何解决不同屏幕尺寸的问题？或者只有 5 到 6 个断点就够了？

这就是一个完整的移动网站，你可以在那里注册并进行演示，当用户访问时，他将被重定向到m.domain.com，你可以删除块，添加画廊，添加菜单, 添加页面等

仅使用百分比可以在没有媒体查询的情况下为您提供响应

好吧，您还需要使用em 或% 值。对于我自己，当文本难以阅读时，我会使用媒体查询来删除一些无用的内容并更改列数。我通常有 3 或 4 个断点：宽屏；屏幕;药片;电话。

【参考方案1】：

我不确定您要寻找哪种替代方案。 “响应式设计”是指“响应其环境的设计”。要做到这一点，你需要一些能让你说“如果环境是 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 已经列出了这些内容，并且随着新设备的推出，未来将继续这样做。

制作一个适用于许多不同视口的设计并不容易，但这与媒体查询的工作方式无关。这本来就是一项艰巨的任务。

【参考方案2】：

只需选择一组您可以管理的中断（例如 4 个），然后为具有流畅设计的那些进行编码，以便您的内容扩展至下一个中断的大小，然后跳转到下一个布局。

例如，如果您选择在 320、480、800 和 1024 处设置宽度中断，您可以将最小宽度设置为 320，以防止出现更小的设备（不确定是什么）时内容变小。如果出现宽度为 640 的设备，它会使用 480 中断和居中或使用流体（CSS 具有基于 % 的大小而不是 px），因此内容会扩展以填充可用的额外空间。

在此示例中，大于 1024 的任何设备（主要是台式机和更高规格的平板电脑/手机）都将使用最后一个中断。实际上，这是您在开发过程中会看到的大部分时间。

【讨论】：

谢谢。你能给我一些适用于大多数设备的断点吗？谢谢！

通常使用 (min-device-width:X) 和 (max-device-width:Y)。我倾向于使用 [X:320,Y:480] [X:640,Y:800] [X:1024,Y:1280] ，然后使用默认值更大。根据您的设计，您甚至可能不需要最后一个（不要忘记方向版本）

@KPO：“你能给我一些适用于大多数设备的断点吗？”不。五年前，没人知道 iPad mini、三星 Galaxy Notes 和微软 Surface 会流行。 （也许我在延伸“最后一个很受欢迎。”）网络是全球性的——你永远不知道有人会用什么设备来查看它。最好根据设计的内容来定义设计的断点。参见例如coding.smashingmagazine.com/2012/03/22/…

再过五年，人们可能会在 4K 电视、壁挂式 iPad 或者——如果我们真的跳出框框——在黑莓制造的流行设备上查看我们的网站。网页设计面临的挑战是设计一些不会在硬件和软件属性发生变化时破坏的东西。

没错，但希望到那时至少会有一次设计更新:)

【参考方案3】：

我们在项目中使用 Adapt.js，它对我们来说非常好。我们有四个断点：移动设备、平板电脑、笔记本电脑和台式机。

我们选择不使用媒体查询，因为我们必须支持 IE8 并且不想与 CSS3 功能的 polyfill 混为一谈。看看这个。

http://adapt.960.gs/

【讨论】：

您在手机和平​​板电脑上支持 IE 8 吗？