css - 字体系列中的基础媒体查询

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 中，它不会匹配有效的字体名称，只会被安全地忽略。