CSS3 媒体查询错误

Question

我想更改网页设计如果设备屏幕宽度大于 1024px 为此我使用 @media only screen and (min-width: > 1024px){ } 但它不起作用.

请告诉我解决方法是什么。

Answer 1

而不是使用Demo

@meida only screen and (min-width: > 1024px){...}

使用这个

@media screen and (min-width:1024px) {...}
/* styles for browsers larger than 1024px; */ 

@media screen and (max-width:1024px) {...}   
/* styles for browsers less than 1024px; */

}

Answer 2

您尝试实现的当前代码将达到目的，但前提是您纠正其中的语法错误。

所以，而不是

@media only screen and (min-width: > 1024px){ }

你可以做到

@media only screen and (min-width: 1024px){ 
    /* css rules here will apply only if the size of the screen is greater than AND equal to 1024px */
}

注意： @为 min-width|max-width 指定的媒体查询值也将包含值本身。这意味着如果您希望特定样式应用于元素 恰好 当屏幕宽度大于 1024px（并且不等于它） ), 您应该将值更改为 min-width: 1025px.

CSS3 媒体查询错误

CSS3 media query error

css

media-queries