关于响应式设计的移动断点

Question

不是移动设计人员，但必须与我的一些供应商合作，他们正在为我的公司制作移动网站。

他们提供的视觉设计图片有 3 个断点。基本上是说明网站将如何查找 320px、600px 和 768px 以上的行。

现在，当我问我的供应商哪个会显示 iphone 4 的纵向分辨率为 640 时，他说它将显示 320 个断点。他向我展示了以下网站，其中有一个名为 Device-W 的列，他说应该在网站开发期间使用该列。 http://screensiz.es/phone

现在的事情是，在我去找开发供应商之前，我希望有人能帮助我理解外行术语中的 Device-W 是什么，这样我肯定不会做出任何错误的决定。

Answer 1

这个link 应该可以帮到你。

device-width 指的是设备本身的宽度，换句话说， 设备的屏幕分辨率。大多数手机的设备宽度为 480px 或更低，包括流行的 iPhone 4（设备宽度： 320px），尽管它在技术上具有 640 x 960 分辨率。这是 由于 iPhone 4 的视网膜显示屏将两个设备像素塞入 屏幕上的每个 CSS 像素。 Ipad 3 也是如此。它的 报告的设备宽度是 768px 就像它的前辈一样，即使 它的实际屏幕分辨率为 1536px x 2048px。一般宽度是 不过，在创建响应式网页方面更通用 当您希望专门针对移动设备时，设备宽度很有用 设备（例如，不是带有小浏览器窗口的桌面），如 很少有桌面的屏幕分辨率低于某个数字，例如 为 320 像素 x 480 像素。