truy vấn Foundation phương tiện truyền thông trong font-family

Question

Trong Foundation, file CSS chính bắt đầu với điều này

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; } 

Tại sao có truy vấn phương tiện truyền thông trong thuộc tính font-family?

Answer 1

Nếu bạn nhìn vào foundation.js on Github, có vẻ như họ chỉ sử dụng giá trị phông chữ để truyền truy vấn phương tiện tới Javascript, có lẽ để giữ cho chúng nhất quán nếu mọi người thay đổi mặc định trong SCSS. Trong CSS, nó sẽ không khớp với tên phông chữ hợp lệ và sẽ bị bỏ qua một cách an toàn.