Does anyone know why the second media query (401 to 750) is not applying?
有谁知道为什么第二个媒体查询(401到750)没有应用?
#mydiv {color:#FF0000;}
@media screen and (max-width:400px){
#mydiv {color:#33CC33;}
}
@media screen and (min-width:401px and max-width:750px){
#mydiv {color:#000;}
}
<div id="mydiv">
testing text color with media queries
</div>
1 个解决方案
#1
3
The min-width and max-width descriptors need to be in their own set of parentheses, with the and outside them similarly to when you place it between screen and the first descriptor, like so:
最小宽度和最大宽度描述符需要在它们自己的括号中,其中和外部类似于将它放在屏幕和第一个描述符之间,如下所示:
@media screen and (min-width: 401px) and (max-width: 750px)
#1
3
The min-width and max-width descriptors need to be in their own set of parentheses, with the and outside them similarly to when you place it between screen and the first descriptor, like so:
最小宽度和最大宽度描述符需要在它们自己的括号中,其中和外部类似于将它放在屏幕和第一个描述符之间,如下所示:
@media screen and (min-width: 401px) and (max-width: 750px)