html – 为什么移动优先响应式设计往往不使用最大宽度查询和最小宽度查询？

概述首先,我了解移动优先响应式网页设计背后的基本原理,并完全同意这些原则.但有一点我不明白： 根据我的经验,并非所有小屏幕样式都可用于更大版本的网站.例如,通常较小的版本往往具有较大的可点击区域,hamburger navigation等.所以我有时必须覆盖这些特定的样式,除了逐步增强基本样式. 所以我想知道：为什么在移动优先响应式网页设计的背景下很少提及(或使用)max-width？因为看起来它可以 首先,我了解移动优先响应式网页设计背后的基本原理,并完全同意这些原则.但有一点我不明白：

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

所以我想知道：为什么在移动优先响应式网页设计的背景下很少提及(或使用)max-wIDth？因为看起来它可以与min-wIDth一起使用来隔离对于较大屏幕无用的较小屏幕的样式,从而防止不必要的代码重复.

提到min-wIDth的引用通常是移动优先,但不是max-wIDth：

With that in mind,which media query best fits with the “mobile first” methodology?
Assuming we want to build a mobile / small screen layout,and then
expand on the styling for larger browsers,it’d be min-wIDth …
The alternative is styling the site for a desktop browser,using
max-wIDth querIEs instead to apply new CSS as device wIDth decreases.
But that’s contrary to the “mobile first” approach

来自：http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

编辑：更具体一点：我想知道是否有理由从移动优先的响应式设计中排除max-wIDth(因为它似乎对于将你的CSS编写为尽可能的DRY非常有用,因为有些样式可用于小屏幕不会用于更大的屏幕).

解决方法 我不确定这篇文章是评论还是答案,但我完全同意max-wIDth经常被忽略甚至被忽视,并且想在这个主题上提出我的两分钱.

对于大多数媒体查询,min-wIDth毫无疑问是最好的方法.一个常见的场景是float,你很少想要在细长的屏幕上浮动元素,但仍希望它们在较大的屏幕上浮动,所以你只需通过最小宽度的媒体查询添加浮动.

一般来说,推理是,最好在需要时添加一些东西,而不是在不需要的时候删除它.

由于您几乎总是将更多的CSS添加到更大的屏幕而不是反之亦然,因此人们将自己局限于最小宽度的媒体查询.

但是当您实际添加专用于较小屏幕的CSS时,会出现什么情况呢？

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

这并不重要,重点是有时候你想要在较大的屏幕上添加一些不应该存在的小屏幕.因此,按照前面提到的推理,在这些情况下,使用max-wIDth而不是min-wIDth是有意义的.

总结

以上是内存溢出为你收集整理的html – 为什么移动优先响应式设计往往不使用最大宽度查询和最小宽度查询？全部内容，希望文章能够帮你解决html – 为什么移动优先响应式设计往往不使用最大宽度查询和最小宽度查询？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。