css – 断点如何在现代高分辨率设备上运行?


例如,我的Galaxy S7 Edge的分辨率为1440 x 2560像素.



@media (min-width: 768px) {
  .container {
    width: 750px;
@media (min-width: 992px) {
  .container {
    width: 970px;
@media (min-width: 1200px) {
  .container {
    width: 1170px;


来自文章A pixel is not a pixel is not a pixel ……

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 as width: 300px or font-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 with width: 300px takes 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

转载注明原文:css – 断点如何在现代高分辨率设备上运行? - 代码日志