css - 与媒体查询一起使用的好的分辨率值是多少？

Question

最近我一直在研究 CSS 媒体查询，因为它是让我的网站适应各种屏幕尺寸的好方法。我计划将它们实现到实时版本中。

我的问题是:是否有推荐的布局更改分辨率值？

Answer 1

有关模板“320 及以上”的文章，请参阅本文 - Andy Clarke ，它被许多开发人员和设计人员使用:http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

如果向下滚动到媒体查询部分，您会看到它们使用五个 CSS3 媒体查询增量(480、600、768、992 和 1382 像素)。通常我只使用 4 个(480、600、768、1024)。

解释范围:

min-width: 480px:将针对横向模式及以上的移动设备

min-width: 600px:针对纵向模式及以上的平板电脑

min-width: 768px:针对横向模式及以上的平板电脑

min-width: 1024px: 以桌面 View 为目标

通常我会在一开始就使用我的移动纵向 View CSS(因此称为“320 及以上”)。