css - 如何正确地为iphone、平板和桌面进行媒体查询

Question

我正在尝试针对 3 种不同的 View 进行设计，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 **
}

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

Answer 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?