Html 为什么mobile first responsive设计倾向于不使用最大宽度查询和最小宽度查询?

Html 为什么mobile first responsive设计倾向于不使用最大宽度查询和最小宽度查询?,html,css,mobile,responsive-design,Html,Css,Mobile,Responsive Design,首先,我理解mobile First响应式网页设计背后的基本原则,并完全同意这些原则。但有一件事我不明白: 根据我的经验,并不是所有的小屏幕样式都可以用于更大版本的网站。例如,通常较小的版本往往有较大的可点击区域,等等。因此,除了逐步增强基本样式外,我有时还必须覆盖这些特定样式 所以我想知道:为什么在mobile first响应式web设计中很少提到(或使用)max width?因为它看起来可以与min width一起用于隔离较小屏幕的样式,而这些样式对较大屏幕没有用处,因此可以防止不必要的代码

首先,我理解mobile First响应式网页设计背后的基本原则,并完全同意这些原则。但有一件事我不明白:

根据我的经验,并不是所有的小屏幕样式都可以用于更大版本的网站。例如,通常较小的版本往往有较大的可点击区域,等等。因此,除了逐步增强基本样式外,我有时还必须覆盖这些特定样式

所以我想知道:为什么在mobile first响应式web设计中很少提到(或使用)max width?因为它看起来可以与min width一起用于隔离较小屏幕的样式,而这些样式对较大屏幕没有用处,因此可以防止不必要的代码复制


一个引用,其中提到最小宽度通常是移动的,但不是最大宽度:

考虑到这一点,哪种媒体查询最适合“移动优先”方法? 假设我们想要构建一个移动/小屏幕布局,然后 扩展较大浏览器的样式,它将是最小宽度。。。 另一种方法是使用 取而代之的是最大宽度查询,以便在设备宽度减小时应用新的CSS。 但这与“移动优先”的方法相反

发件人:



编辑:更具体地说:我想知道是否有理由将最大宽度排除在mobile first responsive设计之外(因为它似乎有助于尽可能干燥地编写css,因为一些小屏幕样式不会用于大屏幕).

max width很少被提及,并被广泛用于开发手持设备的响应性设计。我更喜欢更频繁地使用最大设备宽度。对于很少使用最大宽度的理解没有任何概括

您可以在此处查看各种移动设备的各种媒体查询(常用):

对于iPhone:

为了更清楚地了解我的设计,我确实偶尔使用媒体类型作为手持设备


考虑到

移动第一响应设计是一种理念、一种理念、一个目标。你如何实现这一目标有待解释

一种或另一种技术的使用更多地与复杂性有关。最后,你想要使用一个可以理解的“系统”。在系统设计中使用的参数越多,调试就越困难

使用max-width和min-width查询之间没有真正的区别,除了它们需要的思维方式明显不同之外。仅使用其中一种方法只是一种选择;)

没有人强迫你这么做,但我也建议你亲吻

当然,如果你需要的话,可以加上它,但有些犹豫从来都不是坏事。花点时间评估一下你的选择,看看是什么让事情在复杂程度上保持低水平,这通常是更好的选择。

我不确定这篇文章是评论还是回答,但我完全同意,
max width
经常被忽视,甚至被看不起,我想就这个话题发表我的看法

对于大多数媒体查询,
minwidth
无疑是最好的方法。一种常见的情况是
float
,在这种情况下,您很少希望浮动元素出现在薄型屏幕上,但仍然希望它们出现在更大的屏幕上,因此您只需通过
minwidth
媒体查询添加
float

一般来说,其理由是,在需要时最好添加一些内容,而不是在不需要时删除。 由于您几乎总是在大屏幕上添加更多CSS,而不是相反,因此人们将自己限制在
minwidth
媒体查询是有道理的

但是,当你真的在小屏幕上添加CSS时,情况会怎样呢

也许你想用一个图标来替换文本,并且必须通过伪元素来完成,也许你正在用CSS来改变小屏幕的布局。也许您需要更改一些颜色或在较小的屏幕上添加
边距
/
填充


其实这并不重要,关键是有时候你想在一个小屏幕上添加一些不应该出现在大屏幕上的东西。因此,按照前面所述的推理,在这些情况下,使用
max width
而不是
min width

是有意义的。我想说,撰写您正在阅读的文章的人根本不认为他们需要这些文章。但是没有什么能阻止你使用它们。。这不像“手机优先”是一套严格的规则,如果你不遵守,人们会发现你并打你哈哈。我个人设计桌面向下部分是因为你所说的。(也是因为我倾向于设计我更喜欢人们在桌面上观看的网站)@BlakeMann,哈哈,是的,我当然知道我可以调整规则。我只是想知道为什么mobile first和min width之间存在严格的关联,以及是否有理由不将max width作为一个有用的工具提及。顺便说一句,我知道min width与mobile first RWD关联是因为渐进式增强(从而在基础样式的基础上构建,而不是以最大宽度将其剥离)。我只是想知道,除了渐进式增强之外,是否有理由不使用它来实现我在问题中提到的目标。听着,我理解你为什么问这个问题,但感谢你的回答!你提到的来源似乎以更老式的方式接近响应式设计(固定宽度基于设备分辨率,而不是基于设计中断的点)。让我更具体地问我的问题:我想知道mobile first和mi之间严格关联的原因是什么