我正在从一些 Handelbar 模板编译一些静态 html 文档。我错误地忘记了 html在<!doctype html>这让我的文档解释有点不同，我假设 4.0 过渡...这就是 w3c 所说的。
所以我添加了它，现在我的一些 @media未读取我的 CSS 中的查询。我根本没有更改 css 文件。
如果我删除 html从他们再次工作的文档类型。我认为这可能与我设置为 utf-8 的编码有关看起来它默认为 utf-8 .
我的媒体查询看起来像
@media all and (max-width : 480px){
/* this is not applied */
}
奇怪的是我安装了 Zurb foundation，它的查询工作正常，例如。
@media only screen and (max-width: 767px){
/*eh this works in zurb*/
}
我还使用 SCSS 来编译我的 CSS。
最佳答案
css 文件是通过 SCSS 以不同的方式编译成 utf-8，所以编码是错误的。在我之前没有严格的编码，因为 doctype 中缺少的 html 会抛出一个错误，使 html 解析绕过我正在设置的 meta charset。
所以我所做的只是在我指定的 SCSS 文件中
@charset "utf-8";
现在我符合标准并且我的媒体查询正常工作 yeee
关于html 5 解析媒体查询 vs html 4.0 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15996704/