有几件事我实在是想不通
如今，手机的分辨率与桌面显示器一样好。在构建响应式网站时，您可以使用媒体查询并使事情变得流畅。这些媒体查询基于屏幕大小（以像素为单位）。假设我制作了一个响应式网站，并将其设计为 480px、800px 和 1080px。当我在桌面浏览器中查看它时，我会看到 1080px，但是当我在高端移动设备中查看它时，我也会看到 1080px。如果像素与屏幕尺寸没有实际关系，为什么我们要使用像素呢？
但是，如果您使用 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"> or <meta name="viewport" width="320px">即使用户缩放导致菜单加载到 640 像素宽度的屏幕中，菜单也应该可见。
您可以阅读有关这一切的更多信息：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
