所以我似乎总是为智能手机做两个相同的媒体查询，一个是最小或最大宽度，另一个是最小或最大设备宽度（以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
}
现在我情不自禁地觉得这不是最有效的做事方式......特别是如果我正在移动很多东西/重新设计我的网站/应用程序是特定于手机的。特别是当我不得不为平板电脑尺寸再做两次时。
现在我真的需要两者吗？这有什么关系，究竟有什么区别？
答案 0 :(得分：2)
width和device-width之间的区别可能有点不清楚。我会试着解释一下。
device-width指的是设备本身的宽度，换句话说，就是设备的屏幕分辨率。可以说你的屏幕分辨率是1280x800。这意味着屏幕的宽度为1280像素，因此它的device-width为1280像素。
相反，width是指浏览器视口大小的宽度。
在大多数情况下，width在创建自适应网页方面更为通用（而且我建议您使用这种方式），但是当您希望具体使用时，device-width可能很有用目标移动设备（而不是具有非常小的浏览器窗口的桌面）。
答案 1 :(得分：0)
设备宽度仅针对设备，而不是台式机，你不会使用任何宽度为320x480的台式机/笔记本电脑，所以你可以使用DEVICE宽度。
答案 2 :(得分：0)
您可能只需使用max-width: 767px就可以将目标锁定在iPad下方。
我也只是指定动态宽度，因此您无需区分单个设备。