响应式设计移动和桌面 [英] Responsive Design Mobile and Desktop

问题描述

有些事情我无法理解，

如今的移动设备的分辨率与桌面显示器一样好.在构建响应式网站时，您使用媒体查询并使事情变得流畅.这些媒体查询基于以像素为单位的屏幕大小.所以说我制作了一个响应式网站并设计了 480px、800px 和 1080px.当我在桌面浏览器中查看时，我会查看 1080 像素，但是当我在高端手机中查看时，我也会查看 1080 像素.如果像素与屏幕大小没有实际关系，我们为什么要使用像素?

Mobiles these days have as good as a resolution as desktop monitions. When building a responsive website you use media queries and make things fluid. These media queries are based on size of screen in pixels. So say i make a responsive website and design it for 480px, 800px and 1080px. When i view it within a desktop browser i would view the 1080px, however when i view it within a high end mobile I also view the 1080px. Why do we use pixels if it has no real relation to the size of the screen?

但是，如果您使用视口元标记，它会如何解决这个问题.有人可以解释一下响应式设计是如何与像素相关的，即使知道像素并不能决定屏幕的大小吗?以及视口标签或任何其他标签的工作原理?

However if you use Viewport Meta Tag it some how sorts this problem out. Can someone please explain how responsive design is used in relation to pixels even know pixels doesn't determine the size of the screen? and also how the viewport tag or any other works?

推荐答案

移动浏览器在比手机屏幕大的视图中加载网站，比如 640 x 320，我们称之为视口.如果手机屏幕的实际尺寸为 320 x 160 像素，您的手机将向用户显示网站的一半(典型的非移动优化网站).手机用户必须放大或滚动才能看到另一半.

A mobile browser loads a website in a view which is bigger than the screen of the phone, let's say 640 x 320, we call this the viewport. If the screen of the phone in fact physical have a size of 320 x 160 pixel, your phone will show the user half of the site (typical for a non mobile optimized website). The phone user has to zoom or scroll to see the other half.

如果开发人员构建移动网站，他希望视口等于屏幕.他可以通过设置 来获得这个.这意味着在此示例中，移动浏览器以 320 x 160 的视图加载网站.

If a developer build a mobile website, he want the viewport equals the screen. He can get this by setting <meta name="viewport" width="device-width">. This means the mobile browser loads the website in a view of 320 x 160 in this example.

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

The above will allow the mobile website developer to build a site which fits the phone screen. For example you will hide the sidebar if your screen is smaller than 321 pixel. He will use a media query for this probably: @media (max-width:320px){#sidebar{display:none;}}. This only works if the site loads in a viewport of 320px width. Without the <meta name="viewport" width="device-width"> or <meta name="viewport" width="320px"> the menu should be visible even when the user zooms cause it loads in a screen of 640 pixels width.

您可以在以下网址阅读更多相关信息:http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

You can read more about all this on: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

这篇关于响应式设计移动和桌面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！