基础媒体查询在font-family中

Question

在Foundation中，主要CSS文件以此

开头

meta.foundation-mq-small {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

为什么font-family属性中存在媒体查询？

Answer 1

如果查看foundation.js on Github，看起来他们只是使用font-family值将媒体查询传递给Javascript，可能是为了在人们更改SCSS中的默认值时保持一致。在CSS中，它不会匹配有效的字体名称，只会被安全地忽略。