根据我的经验,并非所有小屏幕样式都可用于更大版本的网站.例如,通常较小的版本往往具有较大的可点击区域,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非常有用,因为有些样式可用于小屏幕不会用于更大的屏幕).
解决方法
对于大多数媒体查询,min-width毫无疑问是最好的方法.一个常见的场景是float,你很少想要在细长的屏幕上浮动元素,但仍希望它们在较大的屏幕上浮动,所以你只需通过最小宽度的媒体查询添加浮动.
一般来说,推理是,最好在需要时添加一些东西,而不是在不需要的时候删除它.
由于您几乎总是将更多的CSS添加到更大的屏幕而不是反之亦然,因此人们将自己局限于最小宽度的媒体查询.
但是当您实际添加专用于较小屏幕的CSS时,会出现什么情况呢？
也许您想用图标替换文本并且必须通过伪元素来完成,也许您正在使用CSS对小屏幕进行布局更改.也许您需要更改一些颜色或在较小的屏幕上添加边距/填充.
这并不重要,重点是有时候你想要在较大的屏幕上添加一些不应该存在的小屏幕.因此,按照前面提到的推理,在这些情况下,使用max-width而不是min-width是有意义的.
