如何正确地对 iPhone、平板电脑和台式机进行媒体查询答案

【问题标题】：How to properly make media query for iphone, tablet and desktop如何正确地对 iPhone、平板电脑和台式机进行媒体查询
【发布时间】：2018-03-24 12:38:51
【问题描述】：

我正在尝试设计 3 种不同的视图，iphone、平板电脑和台式机。这是我的媒体查询。

@media only screen and (min-width: 320px) {
  **mobile/iphone style**
}

@media only screen and (min-width: 768px) {
  **tablet style**
}

@media only screen and (min-width: 992px) {
 ** desktop/bigger screens **
}

所以我从移动视图开始，一切都很好。然后我现在正在设计平板电脑，我在移动视图上所做的一切都在我的平板电脑视图中进行。例如，我在移动视图中的某处设置了填充，并且填充与我的平板电脑视图搞砸了。我不确定我做错了什么。稍后当我开始在桌面视图上工作时，我可能会遇到更多问题。这是进行媒体查询的正确方法吗？

【问题讨论】：

是的，这是一个好方法。它被称为移动优先设计。不过，不需要 320px 查询。为手机设置样式，然后为平板电脑覆盖其中一些样式，然后为桌面覆盖其中一些样式。尽量不要覆盖太多，你会得到一些在手机上运行良好并且在大屏幕上保持一致的东西。
应该没问题，但是是的，如果您设置了一些在移动设备上运行良好的 css，您可能需要为其他尺寸撤消它。我们的想法是尽可能少地这样做，但您可能必须为每个大小添加和删除相同的 css。

标签： css media-queries

【解决方案1】：

这个@media only screen and (min-width: 320px) 将定位所有最小宽度为：320px 的屏幕。改变 MQ 的一种方法是拥有这个

@media only screen and (max-width: 767px) {
  **mobile/iphone style**
}

上述 MQ 风格将在平板电脑屏幕尺寸以下的设备上采用。

更多你可以在这里找到Media Queries: How to target desktop, tablet and mobile?

【讨论】：