@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. 鉴于级联样式表的性质，第三个​​媒体查询中包含的样式将统治第二个媒体查询中的样式。< / LI>

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

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