html - 创建正确的媒体查询断点以涵盖手机和平板电脑

Question

基本上，我正在构建一个需要 2 个媒体查询的网站，1 个将涵盖移动设备，另一个将涵盖平板电脑。这就是要求。

我遇到的问题是，对于移动设备，最大宽度必须为 640px 才能覆盖三星 Galaxy S3，但对于平板电脑，Nexus 7 的纵向最大宽度为 599，因此我冒着手机掉入平板电脑的风险查询。

谁能告诉我如何解决这个问题？

Answer 1

您可以应用此设置。它运作良好(至少对我而言):

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }