媒体查询最小宽度不考虑低于特定宽度的设备答案

【问题标题】：Media query min-width not considering devices below a certain width媒体查询最小宽度不考虑低于特定宽度的设备
【发布时间】：2017-12-06 07:32:57
【问题描述】：

当设备宽度小于我最小的断点“375”时，为什么有些设备没有监听我的媒体查询。我使用@media (min-width: 375px) { // Rules here }... 我知道它“要求”设备必须至少为“375px”宽，但我不知道这里有什么问题.当我将 375 断点更改为 0px 时它可以工作......但这是否是正确的方法？

在我的“media.scss”文件中，我的设置是这样的：

@media (min-width: 375px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1280px) {}

一切正常，但在小于 375 像素的设备上进行测试时，它不会考虑规则。我希望你明白我的意思。我已经查看了 bootstrap 如何进行媒体查询，但我无法确定是否有任何区别。

【问题讨论】：

你应该先使用默认样式，然后媒体查询来覆盖这些默认样式，如果你在第一个媒体查询中设置了默认样式，那么当浏览器低于 375px 时，元素将不会被设置样式
这里是一个例子：jsfiddle.net/ayo2wfup/1。如果这不是您的意思，请使用minimal reproducible example 编辑您的问题

标签： css responsive-design media-queries device

【解决方案1】：

无论您使用的是移动优先还是桌面优先的方法，您都需要一些在没有媒体查询适用时应用的样式。在您的示例中，有 no 样式适用于 375 像素以下的宽度。如果您只是将第一个查询 (

或者说不同：只需删除开头的@media (min-width: 375px) { 及其结尾的} 括号，然后这些样式将适用于所有低于768px 的宽度（也适用于那些小于375px 的宽度）

【讨论】：

【解决方案2】：

创建一个最大宽度为 374px 的媒体查询并将您的 css 插入其中。

【讨论】：