1

所以我似乎总是对智能手机做两个相同的媒体查询，一个是最小或最大宽度，另一个是最小或最大设备宽度（针对 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

 }

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

现在我真的需要两者吗？这有关系吗，到底有什么区别？

4

3 回答 3

2

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

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

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

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

于 2013-04-19T08:40:50.350 回答
0

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

于 2013-04-19T04:41:41.187 回答
0

您可能只是使用max-width: 767px这种方式来定位 iPad 下方的所有内容。

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

于 2013-04-19T08:37:50.173 回答