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

发布时间：2020-12-14 18:46:05 所属栏目：资源来源：网络整理

导读：首先,我了解移动优先响应式网页设计背后的基本原理,并完全同意这些原则.但有一点我不明白：根据我的经验,并非所有小屏幕样式都可用于更大版本的网站.例如,通常较小的版本往往具有较大的可点击区域,hamburger navigation等.所以我有时必须覆盖这些特定的样式

首先,我了解移动优先响应式网页设计背后的基本原理,并完全同意这些原则.但有一点我不明白：

根据我的经验,并非所有小屏幕样式都可用于更大版本的网站.例如,通常较小的版本往往具有较大的可点击区域,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是有意义的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!