Question

我正在尝试设计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 **
}

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

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?

如何正确地进行iphone，平板电脑和台式机的媒体查询

1 个答案: