现代手机和平板电脑的分辨率非常高.
例如,我的Galaxy S7 Edge的分辨率为1440 x 2560像素.
移动设备的常见断点似乎约为768像素,例如bootstrap.
bootstrap.css的例子：
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
我的手机是如何显示网络的“响应式”版本的,尽管它的分辨率可以说比大多数桌面显示器大？从示例中,我的手机似乎总是以“桌面”模式显示该网站.
I do know what web developers are interested in,however. They need
CSS pixels. That is,the “pixels” that are used in CSS declarations
such aswidth: 300pxorfont-size: 14px.These pixels have nothing to do with the actual pixel density of the
device. They’re essentially an abstract construct created specifically
for us web developers.It’s easiest to explain when we consider zooming. If the user zooms
in,an element withwidth: 300pxtakes up more and more of the
screen,and thus becomes wider and wider when measured in device
(physical) pixels. In CSS pixels,however,the width remains 300px,
and the zooming effect is created by expanding CSS pixels as much as
is needed.
也可以看看：
> A tale of two viewports — part one
> A tale of two viewports — part two
