CSS：我似乎总是需要多个相同的媒体查询答案

【问题标题】：CSS: I always seem to need multiple identical media queriesCSS：我似乎总是需要多个相同的媒体查询
【发布时间】：2013-04-12 09:54:19
【问题描述】：

所以我似乎总是对智能手机进行两个相同的媒体查询，一个是最小或最大宽度，另一个是最小或最大设备宽度（针对 iPhone 和其他东西）...

 @media only screen 
 and (min-device-width : 320px)
 and (max-device-width : 480px){

     // Some awesome phone-specific CSS

 }
 @media only screen 
 and (min-width : 320px)
 and (max-width : 480px){

     // THE SAME awesome phone-specific CSS as above

 }

现在我不禁觉得这不是最有效的做事方式......尤其是当我要移动很多东西/重新设计我的网站/应用程序以适应手机时。尤其是当我必须为平板电脑尺寸再做两个时。

现在我真的需要两者吗？重要吗？到底有什么区别？

【问题讨论】：

标签： css responsive-design media-queries device-width

【解决方案1】：

width 和 device-width 之间的区别可能有点不清楚。我会尽力解释。

device-width指的是设备本身的宽度，也就是设备的屏幕分辨率。假设您的屏幕分辨率为 1280x800。这意味着屏幕的宽度为 1280 像素，因此它的 device-width 为 1280 像素。

相比之下，width 指的是浏览器视口大小的宽度。

在大多数情况下，width 在创建响应式网页时更加通用（这是我建议您使用的方法），但当您希望专门针对移动设备时，device-width 可能很有用（而不是浏览器窗口很小的桌面）。

【讨论】：

我还想补充一点，你真的不应该在设计时考虑到特定的设备。良好的响应式网页设计允许流畅的设计在许多屏幕尺寸上都能很好地工作。在您的设计中找到断点并朝着这些方向努力，而不是根据今天碰巧存在的设备来设置固定的像素宽度。我们现在不知道明天会出现什么！ :)

【解决方案2】：

DEVICE 宽度将仅针对 DEVICES 而不是台式机，您不会使用任何宽度为 320x480 的台式机/笔记本电脑，因此您可以使用 DEVICE 宽度。

【讨论】：

【解决方案3】：

您可能只使用max-width: 767px，这样您就可以定位iPad以下的所有内容。

我也会指定动态宽度，这样您就不必区分单个设备。

【讨论】：