设备屏幕分辨率在CSS中如何缩放? [英] How do device screen resolutions scale in CSS?
问题描述
以下是一些热门手机的屏幕分辨率:
Following are screen resolutions of a couple popular phones:
iPhone 6:1334 x 750
iPhone 6: 1334 x 750
三星Galaxy S5:1920x1080
Samsung Galaxy S5: 1920x1080
在CSS中，我们有以下媒体查询:
In CSS we have media queries like:
@media only屏幕(最大宽度:600像素)
这是用于小屏幕的，而上面的两部手机仍对此做出响应?显然，它们的宽度远大于 600px .所以我的问题是，如果真的发生了，这种缩放是如何发生的?我感觉这里缺少CSS的基本概念.
which is meant for small screens, and the two above phones still respond to this? Clearly their width is much more than 600px. So my question is, how does this scaling occur, if at all it occurs? I have a feeling I'm missing a fundamental concept of CSS here.
我了解 @media屏幕实际上是在询问窗口大小而不是设备分辨率.我的问题可以更恰当地表述为:电话浏览器中的窗口大小如何缩放?"
I understand that @media screen is actually asking for the window size and not the device resolution. My question could be more appropriately phrased as, "how does the window size scale in phone browsers?"
推荐答案
我前一阵子在想同样的事情，所以我将总结一下发现的内容.事实证明答案是肯定的，所以希望对您有所帮助.
I was wondering the same a while ago, so I'll summarize what I found. Turned out to be quite the answer, so I hope it helps.
像素本身已经成为相对的.拥有高像素密度的移动屏幕并不意味着您会在小屏幕上自动查看大型网站.像素密度用于确定网页将使用多少像素.
Pixels themselves have become relative. Having a mobile screen with a high pixel density will not mean that you automatically view a large website on a small screen. Pixel density is used to set determine how many pixels the webpage will use.
像素单位与查看设备(即通常为计算机显示器)的分辨率有关.如果输出设备的像素密度与典型的计算机显示器的像素密度非常不同，则用户代理应重新缩放像素值.
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
那我们的意思是什么?CSS像素已成为与实际像素分离的网格单元.并且我们应该将像素密度设置为一个值，该值将使我们清楚我们正在查看的屏幕大小，而与我们实际拥有的像素数量无关.作为Web开发人员，这就是我们设置视口的原因，该视口通过将像素数量除以像素密度来设置相对网格.因此，具有640像素宽度和2.0像素密度的设备将显示320像素宽的屏幕.
So our what does that mean? The CSS pixel has become a grid unit that is decoupled from the actual pixel. And that we should set the pixel density to a value which will make it clear what screen size we're looking on, irrelevant the amount of pixels we actually have. As a web developer, this is why we set the viewport, which sets up the relative grid by dividing the amount of pixels by the pixel density. So a device with 640 pixels width and a 2.0 pixel density will show a 320 pixels wide screen.
现在如何?
有两种方法可以解决此问题.就像我说的，首先是设置视口.但是随着设备的变大，这将导致移动站点的屏幕尺寸可能不适用于完整的移动布局.
There are 2 ways to deal with this. First is to, like I said, set the viewport. But as devices are getting bigger this will lead to a mobile site on screen sizes that might not be intended for the full mobile lay-out.
另一个选择是忽略此问题并开始进行响应式设计.具有两个，三个或四个屏幕尺寸，您可以在这些屏幕尺寸上更改并坚持使用.如果需要某些屏幕尺寸(例如:是否要让ipad风景成为您的常规网页?)，请进行一些研究，然后从那里开始.
The other option is to ignore this and start designing responsively. Have two, three or four screen sizes at which you want your lay-out to change and stick to that. Do some research if you have to for certain screen sizes (like: do you want the ipad landscape to be your normal webpage?) and go from there.
哪个更好?我要说的是设置视口，因为这样一来，无论实际像素多少，都可以确保显示正确的内容.
Which one is better? I would say setting the viewport, because that allows you to ensure the right content is shown, regardless of the real amount of pixels.
进一步阅读
- 可以在 http://www.devicepixelratio.com/中找到(非详尽的)设备像素比率列表/li>
- Apple设备屏幕尺寸为 http://stephen.io/mediaqueries/
- 可以在
- A (non-exhaustive) list of device pixel ratio's can be found at http://www.devicepixelratio.com/
- Apple device screen sizes at http://stephen.io/mediaqueries/
- A clear article on it can be found on gamon.org.
这篇关于设备屏幕分辨率在CSS中如何缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
