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

【问题标题】：CSS Media Query to affect all mobile devices影响所有移动设备的 CSS 媒体查询
【发布时间】：2021-02-23 13:07:46
【问题描述】：

Web 开发方面的菜鸟，并试图在这里自学，这至少可以说是相当令人生畏的，但我仍然很开心。

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

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

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

我只想创建一个媒体查询来进行这项会影响所有移动屏幕尺寸的调整。

希望这是有道理的。

一如既往，你们都很棒！

感谢您的帮助！

【问题讨论】：

标签： css mobile media-queries

【解决方案1】：

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

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

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

【讨论】：

似乎您可以将这个 and 部分添加到另一个答案中以使其更正确。
是的，很遗憾，我没有足够的声誉将其添加为评论。希望这仍然有帮助！

【解决方案2】：

很高兴您选择学习网络开发。

但是你的方法听起来比它更复杂。首先，桌面和移动可以完全一样。它只倒计时到媒体查询。在桌面上，您的浏览器可以与移动设备具有相同的宽度。因此，您需要在您的项目中阐明您希望在什么时候向用户显示“移动”样式以及何时显示“桌面”样式。在我工作或看到的大多数项目中，默认的媒体查询是这样的：

@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 是一个很好的资源：@987654321@

【讨论】：

哦，我没有意识到你可以在最小值和最大值之间设置一个范围。我认为这实际上可能对我有帮助。我会检查一下并告诉你。谢谢大佬，不胜感激。

【解决方案3】：

很好的问题，我搜索中的 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

【讨论】：

【解决方案4】：

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

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

【讨论】：