引导布局媒体查询在 Chrome 上无法以 767 像素工作
Posted
技术标签:
【中文标题】引导布局媒体查询在 Chrome 上无法以 767 像素工作【英文标题】：Bootstrap layout media queries not working at 767px on Chrome 【发布时间】：2017-06-30 01:24:10 【问题描述】：我的 Bootstrap (v3.3.5) 布局 css 在 767 像素处有一个仅限 Chrome 的问题，其中布局样式根本没有被应用。
这是在 3 个浏览器上试验控制台后的行为...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
我所有的媒体查询都按如下方式创建...
@media (max-width: 767px)
/*small view*/
@media (min-width: 768px)
/*full view*/
我已经尝试更改这些值，因此会有重叠（例如，最小宽度为 767 像素），但没有任何效果。
抱歉，如果这有点含糊不清，但我真的不知道从哪里开始调查这个问题，并且只发现了一份来自先前版本的引导程序 (https://github.com/twbs/bootstrap/issues/1531) 的类似行为的报告。
有没有人知道我只会在 Chrome 上看到这个的任何可能原因？无论哪种方式，我们都非常感谢任何有关适当调查方式的建议。
-- 编辑-- 经过数小时的研究，我测试了这个简单的文件...
<html>
<head>
<style>
@media (max-width: 767px)
.headlineText
font-size: 10px;
color: red;
@media (min-width: 768px)
.headlineText
font-size: 10px;
color: green;
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
仅在 Chrome 上 - 767 像素的文本既不是绿色也不是红色 - 它是黑色的，Times New Roman，并且比 10 像素大得多。当然，我不能通过上传到小提琴/codepen 来复制它——所以它一定与我在本地主机上运行（通过 MAMP）的事实有关。绝对零想法为什么会这样，但至少它似乎不会在现场环境中影响我
【问题讨论】：
我只是遇到了类似的问题，而且很奇怪，在 Firefox 和 Chrome 中的布局正好是 767 像素。更奇怪的是，在我朋友的电脑上它运行良好，而且我们都使用的是 Windows 10。 【参考方案1】：将此设为全屏并调整窗口大小。它在 Chrome 中对我有用，并且在两者之间没有显示“不起作用”。
.works
display: none;
.does-not-work
display: block;
@media(max-width:767px)
.works
display: block;
.works::before
content: 'max-width: 767px | ';
.does-not-work
display: none;
@media(min-width:768px)
.works
display: block;
.works::before
content: 'min-width: 768px | ';
.does-not-work
display: none;
<span class="works">works</span>
<span class="does-not-work">does not work</span>旁注，基于 cmets： 大约一年前，我在一个大型网站上遇到了同样的问题。一个6人团队近两年工作的成果。代码从四面八方涌入。我是一个将前端粘合在一起的人，确保一切正常。你可以想象@media 查询是一团糟。我只是通过使用移动优先原则重构所有查询来摆脱错误 - 我使用 Bootstrap's exact order 将所有 @media 分组。为我修好了。直到今天我也不知道是什么原因造成的。它之前（稍微）在768px 和992px 上被（稍微）损坏了。
【讨论】：
谢谢安德烈 - 这对我来说也很好用。我猜这个问题是引导程序加上 Chrome 的组合，类似于我发布的 github 问题链接。如果不使用引导程序，我无法复制该问题，但如果不经过漫长的过程将我的项目简化为易于理解的内容，就很难与您分享整个事情 根据您的描述，这听起来更像是您的 CSS 文件中的typo。可能是一个未关闭的@media 查询，缺少分号，可能有多种原因。您可以做的最好的事情是创建一个新的stylesheet 并在其中复制粘贴现有 CSS 的块。当您转移错误并希望找到它时，您将能够查明。或者您可以使用验证器，但这并非每次都有效。我个人依靠IDE 的能力来警告我我的代码可能存在的任何问题。在你问之前，我是恐龙：我使用phpStorm。 webStorm 是现代同行 - 同一家公司。
谢谢安德烈 - 我想我必须尝试一下 - 还要指出一件事 - 如果我改变我的设置以便我有一个 max-width:768px 和 min-width:768px问题在 Chrome 中消失了，但我在 Safari 和 Firefox 中得到了同样的东西，样式没有在断点处应用 - 非常令人沮丧，但我认为我将不得不花一些时间来浏览我所有的 css :|
大约一年前，我在一个大型网站上遇到了同样的问题。一个6人团队近两年工作的成果。代码从四面八方涌入。我是一个将前端/css 粘合在一起的人，确保一切正常。你可以想象@media 查询是多么的混乱。我只是通过使用移动优先原则重构所有查询来摆脱这一点——我基本上使用Bootstrap's exact order 对所有@media 进行了分组。为我修好了。直到今天我也不知道是什么原因造成的。 :) - 我会添加这个来回答。可能对其他人有用，刚刚意识到:)
再次感谢 Andrei - 只是进行了几个小时的简化/故障排除，它实际上似乎（奇怪地）特定于在 MAMP/local 上运行（如果我更改最大宽度，我可以修复它和最小宽度为相同的值）。任何可能会出现这种情况的想法都将不胜感激，但否则我只会接受这是我的本地主机上的一个小故障【参考方案2】：
Chrome（对我来说是 Win10 上的 89.0.4389.82 版）似乎适用于一小部分像素。因此，将所有较低的断点阈值增加 .9px 为我解决了这个问题。比如
max-width :767px需要变成max-width :767.9px
【讨论】：
以上是关于引导布局媒体查询在 Chrome 上无法以 767 像素工作的主要内容，如果未能解决你的问题，请参考以下文章