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

Question

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

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

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

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

Answer 1

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

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

类似于@m4n0的建议，但这是正确的查询，包括"one_answers"；。这是一个良好的开端，然后您可以继续定义更多的断点，因为在此过程中您需要更多的响应能力。

Answer 2

你的方式听起来比实际情况更复杂。首先，桌面和移动可能完全相同。它只倒数到媒体查询。在桌面上，浏览器的宽度可以与移动设备的宽度相同。因此，您需要在您的项目中澄清您希望在哪一点向用户显示"；Mobile"；样式以及何时显示"；桌面"；样式。在我工作或看到的大多数项目中，默认的媒体查询是这样的：

@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是一个很好的资源：MDN-媒体查询

Answer 3

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

@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
}

Answer 4

在我的搜索中，Android和Apple设备的纵向分辨率通常在450像素以内，横向分辨率通常在800像素以内，我建议你为这两种尺寸创建一个媒体查询，这样你就可以在纵向模式和横向模式下覆盖大量移动设备。如果你的目标是特定的设备，我建议你查找这些特定的屏幕视口大小，并调整或添加更多的媒体查询来覆盖这些情况。

---

请参阅以下链接，了解流行的设备屏幕分辨率大小
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

感谢以下链接对响应式设计的精彩解释
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries