css - 为大尺寸设置媒体查询

Question

我试图理解媒体查询，我想为大于 13 英寸的屏幕设置一个 css 值

这是正确的语法吗？

@media all and (min-width : 992px) {
    .myElement{
        width: 100px;
    }

或

@media all and (@screen-md-min) {
    .myElement{
        width: 200px;
    }

这里有什么区别？

Answer 1

这取决于分辨率和质量。对于 72 PPI(每英寸像素)屏幕(平均分辨率)，13 英寸等于 72 x 13 = 936 像素。因此，您将使用的语法是:

@media screen and (min-width: 936px) {
  .myElement {
    width: 200px;
  }
}

编辑:稍微增加 min-width 以仅将样式应用于宽度超过 13"的屏幕。但这同样取决于屏幕的分辨率和质量。