响应式设计移动和桌面

Question

有一些我无法理解的事情，

这些天的移动设备与桌面设备的解决方案一样好。在构建响应式网站时，您可以使用媒体查询并使事情变得流畅。这些媒体查询基于屏幕大小（以像素为单位）。所以说我做一个响应式网站，并设计为480px，800px和1080px。当我在桌面浏览器中查看它时，我会查看1080px，但是当我在高端移动设备中查看它时，我也会查看1080px。如果它与屏幕尺寸没有实际关系，我们为什么要使用像素？

但是，如果您使用Viewport Meta Tag，那么如何解决这个问题。有人可以解释如何使用与像素相关的响应式设计，即使知道像素不能确定屏幕的大小吗？以及视口标签或其他任何工作方式？

Answer 1

移动浏览器在视图中加载网站，该视图大于手机屏幕，比方说640 x 320，我们称之为视口。如果手机的屏幕实际上是物理尺寸为320 x 160像素，那么您的手机将向用户显示网站的一半（通常用于非移动优化网站）。电话用户必须缩放或滚动才能看到另一半。

如果开发人员构建移动网站，他希望视口等于屏幕。他可以通过设置<meta name="viewport" width="device-width">来获得此功能。这意味着移动浏览器在此示例中以320 x 160的视图加载网站。

以上将允许移动网站开发者构建适合手机屏幕的网站。例如，如果屏幕小于321像素，则会隐藏侧边栏。他将使用媒体查询：@media (max-width:320px){#sidebar{display:none;}}。仅当站点加载宽度为320px的视口时，此方法才有效。 如果没有<meta name="viewport" width="device-width">或<meta name="viewport" width="320px">，即使用户缩放，菜单也应该可见，因为它会在640像素宽的屏幕中加载。

您可以在http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

上详细了解所有这些内容