css - @media screen css 属性只读取两条规则

Question

@media only screen and (max-width:400px) 
{/***style****/}

@media only screen and (min-width:400px) and (max-width:700px) 
{/***style****/}

@media only screen and (max-width:700px) 
{/***style****/}

中间的媒体没有回应。为什么？

Answer 1

这是因为两个原因：

1. 您的第二个和第三个媒体查询本质上是相同的；
2. 鉴于级联样式表的性质，第三个媒体查询中包含的样式将优先于第二个媒体查询中的样式。

尝试删除第三个媒体查询，然后看看您是否有任何乐趣。

@media only screen and (max-width:400px) 
{/***style****/}

@media only screen and (min-width:401px) and (max-width:700px) 
{/***style****/}