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

Question

我知道媒体查询会影响移动设备在不同屏幕尺寸上的页面渲染方式，但我想知道是否有一种媒体查询可以影响所有移动设备，而不考虑屏幕尺寸？

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

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

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

- I Am Sir Ask Alot

Answer 1

如果有人正在寻找一个适用于移动设备的通用且简单的媒体查询，我建议使用以下代码：

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

与@m4n0的建议类似，但是这个包含了正确的“and”查询。这是一个很好的起点，您可以随着需要更多的响应能力来定义更多的断点。

- swedishtea

---

似乎你可以将这个“and”部分添加到另一个答案中，使其更正确。 - Michael Z.

是的，不幸的是，我没有足够的声望将其添加为评论。希望这仍然有所帮助！ - swedishtea

这在一些移动设备上无法使用，例如横向模式下的iPhone Pro 12。 - Juan Alonso

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

- koby

---

哦，我没意识到你可以在最小值和最大值之间设置一个范围。我认为这可能会对我有所帮助。我会去试一下并告诉你的。谢谢，兄弟，感激不尽。 - I Am Sir Ask Alot

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
}

- Amey

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

- Shamir Ajate