CSS Media Query会影响所有移动设备

如何解决CSS Media Query会影响所有移动设备

在网络开发中总NOOB并试图在这里教自己，至少可以说这是很艰巨的，但是我仍然很开心。

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

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

例如，我想调整所有移动设备上的导航菜单，但我不想一味地更改与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设备通常在纵向像素范围内为450px，在横向像素范围内为800px，我建议您针对这两种尺寸创建媒体查询，并且在两种纵向模式下都应覆盖大量移动设备模式和风景模式。如果您要定位的是特定设备，建议您查找那些特定的屏幕视口大小，并调整或添加更多媒体查询以解决这些情况。希望这可以帮助！继续学习。

---

点击以下链接可查看“流行设备屏幕分辨率大小”
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

,

很高兴您选择学习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

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

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 - Media Queries

,

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

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

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