6 html css mobile responsive-design
首先,我了解移动优先响应式网页设计背后的基本原理,并完全同意这些原则.但有一点我不明白:
根据我的经验,并非所有小屏幕样式都可用于更大版本的网站.例如,通常较小的版本往往具有较大的可点击区域,汉堡包导航等.因此,除了逐步增强基本样式之外,我有时必须覆盖这些特定样式.
所以我想知道:为什么在移动优先响应式网页设计的背景下很少提及(或使用)max-width？因为看起来它可以与min-width一起使用来隔离对于较大屏幕无用的较小屏幕的样式,从而防止不必要的代码重复.
提到min-width的引用通常是移动优先,但不是max-width:
考虑到这一点,哪种媒体查询最适合"移动优先"方法？假设我们想构建一个移动/小屏幕布局,然后扩展大型浏览器的样式,那就是min-width ......另一种方法是为桌面浏览器设置网站样式,使用max-width查询代替当设备宽度减小时应用新的CSS.但这与"移动优先"方法相反
来自:http://petegale.com/blog/css-media-queries-min-width-vs-max-width/
编辑:更具体一点:我想知道是否有理由从移动优先的响应式设计中排除max-width(因为它似乎对于将你的css编写为尽可能的DRY非常有用,因为有些样式可用于小屏幕不会用于更大的屏幕).
我不确定这篇文章是评论还是答案,但我完全同意,max-width经常被忽视甚至被瞧不起,并希望在这个主题上提出我的两分钱.
对于大多数媒体查询,min-width毫无疑问是最好的方法.一个常见的情况是float,你很少想要在纤薄的屏幕上浮动元素,但仍然希望它们漂浮在更大的屏幕上,所以你只需float通过min-width媒体查询添加.
由于您几乎总是将更多的CSS添加到更大的屏幕而不是反之亦然,因此人们将自己局限于min-width媒体查询是有道理的.
可是你知道当你真正场景都添加CSS这是独有的小屏幕？
也许您想用图标替换文本并且必须通过伪元素来完成,也许您正在使用CSS对小屏幕进行布局更改.也许您需要更改一些颜色或添加margin/ padding到较小的屏幕.
这并不重要,重点是有时候你想要在较大的屏幕上添加一些不应该存在的小屏幕.因此,按照前面提到的推理,在这些情况下,使用max-width而不是使用min-width.