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

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

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

谁能建议我该如何解决？

最佳答案

您可以应用此设置。它运作良好（至少对我而言）：

/* 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) { ... }

关于html - 创建正确的媒体查询断点以覆盖手机和平板电脑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13840712/