有些事情我就是想不通，
如今，手机的分辨率与桌面显示器一样好。在构建响应式网站时，您会使用媒体查询并使事情变得流畅。这些媒体查询基于屏幕大小（以像素为单位）。假设我制作了一个响应式网站并将其设计为 480 像素、800 像素和 1080 像素。当我在桌面浏览器中查看时，我会查看 1080 像素，但是当我在高端手机中查看时，我也会查看 1080 像素。如果像素与屏幕大小没有实际关系，为什么还要使用像素？
但是，如果您使用 Viewport Meta Tag，它会如何解决这个问题。有人可以解释如何使用与像素相关的响应式设计，即使知道像素不能决定屏幕的大小？以及视口标签或其他任何工作方式？
【问题讨论】：
移动浏览器在比手机屏幕更大的视图中加载网站，比如 640 x 320，我们称之为视口。如果手机的屏幕实际上具有 320 x 160 像素的大小，则您的手机将向用户显示网站的一半（对于非移动优化网站来说是典型的）。手机用户必须缩放或滚动才能看到另一半。
如果开发人员构建了一个移动网站，他希望视口等于屏幕。他可以通过设置<meta name="viewport" width="device-width"> 得到这个。这意味着移动浏览器在此示例中以 320 x 160 的视图加载网站。
以上内容将允许移动网站开发人员构建适合手机屏幕的网站。例如，如果您的屏幕小于 321 像素，您将隐藏侧边栏。他可能会为此使用媒体查询：@media (max-width:320px){#sidebar{display:none;}}。这仅在站点加载到 320 像素宽度的视口中时才有效。
如果没有<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
【讨论】：