影响所有移动设备的CSS媒体查询

我完全不懂网络开发，并试图在这里自学，至少可以说，这是相当令人畏惧的，但我仍然很开心

无论如何，我知道媒体查询会影响移动设备在不同屏幕大小上呈现页面的方式，但我想知道是否只有一个媒体查询会影响所有移动设备，而不管屏幕大小如何

我只是想确保它不会影响桌面

例如，我想在所有移动设备上调整导航菜单，但我不想在my style.css中仔细更改与屏幕大小相关的每个媒体查询

我只想创建一个媒体查询，使这个调整，将影响所有手机屏幕大小

希望这是有道理的

和往常一样，你们都很棒

---

谢谢你的帮助

这取决于您的手机布局设计。即使在移动视图中，您也需要考虑纵向和横向模式。 对于一些常见的样式，我通常使用

@media screen  (max-width: 767px) { }

您还可以使用方向设置媒体查询，如下所示

@media screen  and (max-device-width: 480px) and (orientation: portrait) { 
  Your classes here
}

@media screen  and (max-device-width: 640px) and (orientation: landscape)  {
  Your classes here
}

---

好问题，在我的搜索中，Android和Apple设备的纵向分辨率通常在450像素以内，横向分辨率通常在800像素以内。我建议您为这两种大小创建一个媒体查询，并且您将在纵向模式和横向模式下覆盖大量移动设备。如果您针对的是特定的设备，我建议您查找这些特定的屏幕视口大小，并调整或添加更多媒体查询以涵盖这些情况。希望这有帮助！继续学习

---

以下链接提供了流行的设备屏幕分辨率大小

感谢以下链接对响应性设计的出色解释

---

很高兴您选择学习Web开发

但你的方式听起来比实际情况更复杂。首先，台式机和移动设备可以完全相同。它只对媒体查询进行倒计时。在桌面上，您的浏览器可以与移动设备具有相同的宽度。因此，您需要在项目中明确何时向用户显示“移动”样式以及何时显示“桌面”样式。在我工作或看到的大多数项目中，默认的媒体查询如下：

@media (min-width: 320px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1220px) {}
@media (min-width: 1440px) {}

@media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
@media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
@media (min-width: 768px) {}  // general desktop && tablet styles if needed
@media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
@media (min-width: 1025px) // start with desktop styling

因此，您可以在每个媒体查询中看到，您可以为选定的查询大小附加一些新样式。为了使书写样式更容易，并且不会在每个新宽度上覆盖所有这些内容，您可以这样做：

@media (min-width: 320px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1220px) {}
@media (min-width: 1440px) {}

@media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
@media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
@media (min-width: 768px) {}  // general desktop && tablet styles if needed
@media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
@media (min-width: 1025px) // start with desktop styling

介质查询之间的所有这些样式仅附加到尺寸。 因此，只需选择所需的宽度，例如：

All mobile styles attached only between 320px and 1024px

@media (min-width: 320px) and (max-width: 1024px) {
  .nav{ background: red; }
}

All desktop styles attached only after 1025px
@media (min-width: 1025px) {
  .nav{ background: green; }
}

所有这些媒体查询只显示不同的宽度，您也可以按高度进行查询，但由于设备/显示器尺寸的不同，这种查询方式更加困难

如果您真的想检查用户代理并在浏览器、代理、设备或类似的东西之间进行划分，那么您需要JavaScript，这比只显示不同宽度的样式要复杂得多

---

我希望这对你有帮助！如果您对媒体查询以及如何正确编写媒体查询有任何疑问，MDN是一个很好的资源：

对于任何想为移动设备寻找通用且简单的媒体查询的人，我建议如下：

@媒体屏幕和（最大宽度：767px）{}

---

与@m4n0的建议类似，但这是包含“and”的正确查询。这是一个很好的开始，然后您可以继续定义更多断点，因为您需要更多的响应能力。

哦，我不知道您可以将范围设置为最小值和最大值之间。我认为这实际上可能对我有所帮助。我会检查一下，然后告诉你。谢谢你，伙计，谢谢你。看来你可以把这个

和
部分添加到另一个答案中，让它更准确。是的，不幸的是，我没有足够的声誉来添加它作为评论。希望这仍然有用！