基金会媒体查询

Question

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