html 5 解析媒体查询与 html 4.0 过渡答案

【问题标题】：html 5 parsing media queries vs html 4.0 transitionalhtml 5 解析媒体查询与 html 4.0 过渡
【发布时间】：2013-04-14 07:19:25
【问题描述】：

我正在从一些 Handelbar 模板编译一些静态 html 文档。我错误地忘记了<!doctype html> 中的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。

【问题讨论】：

【解决方案1】：

css 文件是通过 SCSS 以与 utf-8 不同的方式编译的，因此编码错误。在我之前没有严格的编码，因为doctype 中缺少的html 引发了一个错误，使得 html 解析绕过了我设置的meta charset。

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

@charset "utf-8";

现在我符合标准并且我的媒体查询正常工作了

【讨论】：