媒体查询：屏幕＆gt; 1024

Question

我正在尝试在网站中应用媒体查询，但我的知识并不深入本主题，所以基本上我想在检测到的屏幕大于1024 * 768时将特定样式应用于标记。

我做了这个

@media screen and ( device-width: 1024px ) {

}

但我必须确定分辨率何时大于1024

Answer 1

试试这个：

@media only screen and (min-width : 1025px) {
    .classname {
        /* styles here */
    }
}


@media only screen and (max-width : 1024px) {
    .classname {
        /* other styles here */
    }
}

Answer 2

使用标准媒体屏幕查询。一旦宽度为1024px或更大，查询将触发样式更改。

@media screen and (min-width: 1024px) {
    /* Styles go here */
    #layout {
        width: 90%;
    }
}

Answer 3

@media all and (min-width: 1024px) {
  #css {
    foo : bar;
  }
}

Answer 4

@media (min-width: 1024px) and (max-width: 1920px) {

html {背景：红色； } }