CSS：@media 查询的最大宽度不起作用

Posted 2023-03-06

【中文标题】CSS：@media 查询的最大宽度不起作用

【英文标题】：CSS: max-width for @media query not working

【发布时间】：2015-08-22 18:11:24

【问题描述】：

（它适用于其他浏览器，但不适用于 chrome）

我只想在浏览器大小小于 1400px 时应用样式

max-width 不工作

@media only screen and (max-width:1400px)  
.heading-left 
    left: -0.5%;
  

与min-width 一起工作

@media only screen and (min-width:480px)  
.heading-left 
    left: -0.5%;
   

但当浏览器宽度超过 1400 像素时也会改变（我知道它是这样工作的，但 max-width 不起作用）

为此提琴

https://jsfiddle.net/j4Laddtk/

【问题讨论】：

可能是您的查询顺序错误...但没有演示，很难提供帮助。

这是目前唯一的媒体查询

你能提供一个小提琴吗？

jsfiddle.net/j4Laddtk

开发者工具说视口的大小是 1400px，但 css 考虑的实际宽度超过 1400px。因此，媒体查询不起作用。

【参考方案1】：

试试这个方法。

这将基于设备定位

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
 
   .heading-left 
    left: -0.5%;
   

基于浏览器窗口区域定位

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
 
   .heading-left 
    left: -0.5%;
   

【讨论】：

不工作。 max-device-width 将检查设备的宽度而不是窗口的宽度吗？

@DivyaBarsode，是的，如果您想定位显示浏览器，请尝试max-width。

@DivyaBarsode，编辑了我的答案，添加了max-width。它在我的本地机器上运行良好。

@DivyaBarsode，您可以尝试将!important 添加到left:-0.5% !important; 等左侧属性中。

我刚刚检查了歌剧浏览器。它在那里工作正常。但在 chrome 中它不是

【参考方案2】：

这对我有用

@media screen and (max-width: 700px) and (min-width: 400px)  
    .heading-left  left: -0.5%; 

【讨论】：

我忘记了and 后面的空格。已编辑

max 应该在 min... 之后，尽管这是不推荐的技巧。

【参考方案3】：

您是否尝试过添加视口？

<meta name="viewport" content="width=device-width, initial-scale=1">

Working JSFiddle

Viewport 用于渲染响应式页面，因此主要用于处理移动网站，但在处理媒体查询时，它有助于告诉 CSS 实际的设备宽度是多少。

【讨论】：

如果没有这个标签，媒体查询只会匹配任何条件。例如max-width: x px 总是返回 true。

为什么这不是公认的答案，为什么公认的答案根本没有帮助

我爱你！这太棒了！

谢谢兄弟，整个晚上我都在试图弄清楚我做错了什么。你让我免于头痛

关于 css 的非常重要的元标记

【参考方案4】：

您需要在声明标准后放置@media 查询

【讨论】：

谢谢。这是我的实际问题，如果您不是经验丰富的开发人员，这会非常偷偷摸摸。

【参考方案5】：

您的浏览器 zoom-ed 是否与100% 级别不同？如果是这样，放大到100% (Ctrl+MouseWheel)

【讨论】：

我在这上面至少花了半个小时。你是一个温柔的（wo）人，一个学者！

你救了我的命。检查了所有的技术答案。

ctrl+0 , 重置浏览器

谢谢！我的头很痛。大声笑。

大多数浏览器的快捷方式：linux/win：ctrl + 0，mac：cmd + 0

【参考方案6】：

@media only screen and (max-width: 1000px) 
  /*Don't forget to add meta viewport in your html*/

如果它不起作用，请尝试通过在开发人员工具中导航到网络并切换禁用缓存来检查浏览器中的元素。

有时由于浏览器缓存而无法正常工作。

【参考方案7】：

可能发生的另一件事是你做了一些非常愚蠢的事情，比如：

@media only screen and (max-width: 1400)   ... 

确保你输入 px 来确定你的最大宽度是多少。

@media only screen and (max-width: 1400px)   ... 

我从来没有在这么简单的事情上被困一个小时..

【参考方案8】：

如果您已经尝试了所有方法但仍然卡住，请记住媒体查询需要位于底部，因为 CSS 是自上而下应用的。

如果你有

.container 
  color: white;

如果屏幕宽度小于 600 像素，您希望字体为粉红色，您的其他媒体查询需要低于原始 .container 样式。

.container 
  color: white;


@media only screen and (max-width: 600px) 
  .container 
    color: pink;
  

因此，如果您的媒体查询位于顶部，白色的默认颜色将覆盖粉红色的媒体查询。

【参考方案9】：

这个问题让我花了好几个小时才用 Bootstrap 3 解决它，但它根本不起作用。原因是在每个网页的头部，都需要这个元视图元素。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

更多详情https://www.w3schools.com/css/css_rwd_viewport.asp

【参考方案10】：

我想在这里添加一件事，它仅适用于您有不同的 CSS 文件的情况。如果某些值似乎没有任何影响，则检查具有媒体查询的 CSS 文件是否位于元素内部的底部。最好始终将媒体查询 CSS 文件（如果在不同文件中制作）放在所有其他 CSS 链接的底部。