首先,我了解移动优先响应式网页设计背后的基本原则,并完全同意这些原则。但有一点我不明白:
根据我的经验,小屏幕的所有样式都不能用于更大版本的网站。例如,通常较小的版本往往具有较大的可点击区域hamburger navigation等。所以我有时必须覆盖这些特定的样式,除了逐步增强基本样式。
所以我想知道:为什么在移动优先响应式网页设计的环境中很少提及(或使用)max-width?因为看起来它可以与min-width一起使用来隔离对于较大屏幕无用的较小屏幕的样式,从而可以防止不必要的代码重复。
引用最小宽度的引用通常是移动优先,但不是最大宽度:
考虑到这一点,哪种媒体查询最适合“移动优先”方法? 假设我们想要构建一个移动/小屏幕布局,然后 扩展大型浏览器的样式,它是最小宽度... 另一种方法是使用桌面浏览器为网站设计样式 最大宽度查询代替在设备宽度减小时应用新CSS。 但这与“移动优先”方法相反
来自:http://petegale.com/blog/css-media-queries-min-width-vs-max-width/
编辑:更具体一点:我想知道是否有理由从移动优先响应式设计中排除max-width(因为看起来它可能有助于将你的css写成尽可能干的,因为小屏幕的某些样式不会用于更大的屏幕。)
答案 0 :(得分:9)
我不确定这篇文章是评论还是回答,但我完全同意max-width
经常被忽视甚至被鄙视,并希望将我的两分钱放在主题。
对于大多数媒体查询,min-width
毫无疑问是最佳方法。常见的情况是float
,您很少想要在细长的屏幕上浮动元素,但仍希望它们在较大的屏幕上浮动,因此您只需通过float
媒体查询添加min-width
。
由于您几乎总是将更多的CSS添加到更大的屏幕而不是反之亦然,因此人们将自己限制为min-width
媒体查询。
但是当您实际做添加独有的小屏幕CSS时,会出现什么情况呢?
也许您想用图标替换文本并且必须通过伪元素来完成,也许您正在使用CSS对小屏幕进行布局更改。也许您需要更改一些颜色或将margin
/ padding
添加到较小的屏幕。
这并不重要,关键在于有时候你想要在较大的屏幕上添加一些不应该存在的小屏幕。因此,按照前面提到的推理,在这些情况下,使用max-width
代替min-width
是有意义的。
答案 1 :(得分:2)
max-width并不是很少提及,并且高度用于开发手持设备的响应式设计。我更喜欢更频繁地使用max-device-width。对于很少使用max-width的理解没有概括。
您可以在此处查看各种移动设备的各种媒体查询(经常使用):http://nmsdvid.com/snippets/
对于iPhone:http://www.stephentgilbert.com/mediaqueries/
为了更加确定我的设计,我偶尔会使用媒体类型作为掌上电脑。
此致
答案 2 :(得分:2)
移动第一响应式设计是一种哲学,一种理念,一种目标。您如何实现这一目标是开放的解释。
使用一种或另一种技术更多地与复杂性有关。最后你想要使用一个可以理解的“系统”。您在系统设计中使用的参数越多,调试就越困难。
使用max-width和min-width查询之间没有真正的区别,除了他们需要的明显不同的思维方式。只使用一个或另一个只是KISS;)
的选择没有人强迫你这样做,但我也会建议你去亲吻。
当然,如果你需要它,加上它,但有些hesistation永远不会坏。花点时间来评估你的选择,看看在复杂程度上保持低水平的因素,通常是更好的选择。