Question

我从一些Handelbar模板编译一些静态html文档。我错误地忘记了html中的<!doctype html>，这使我的文档解释有点不同，我假设4.0过渡...这就是w3c所说的。

所以我添加了它，现在我的css中的一些@media查询没有被读取。我根本没有改变css文件。

如果我从文档类型中删除了html，则会再次使用它们。我认为这可能与我设置为utf-8的编码有关，看起来默认为utf-8。

我的媒体查询看起来像

@media all and (max-width : 480px){
  /* this is not applied */
}

奇怪的是，我安装了Zurb基础，并且它的查询工作正常，例如。

@media only screen and (max-width: 767px){
  /*eh this works in zurb*/
}

我也使用SCSS编译我的CSS。

Answer 1

css文件的编译方式与utf-8通过SCSS编译的方式不同，因此编码错误。之前我没有严格的编码，因为html中缺少doctype会导致错误，导致html解析绕过meta charset设置。

所以我所做的只是在我指定的SCSS文件中

@charset "utf-8";

现在我符合标准，我的媒体查询正在运作