@媒体屏幕css属性仅读取两条规则 中间的媒体没有反应。为什么?

@媒体屏幕css属性仅读取两条规则 中间的媒体没有反应。为什么?,css,responsive-design,media,Css,Responsive Design,Media,这是因为两个原因: 您的第二个和第三个媒体查询基本相同 鉴于级联样式表的性质,第三个媒体查询中包含的样式将优先于第二个媒体查询中包含的样式 尝试删除第三个媒体查询,然后看看您是否感到高兴 @media only screen and (max-width:400px) {/***style****/} @media only screen and (min-width:400px) and (max-width:700px) {/***style****/} @media only sc

这是因为两个原因:

  • 您的第二个和第三个媒体查询基本相同
  • 鉴于级联样式表的性质,第三个媒体查询中包含的样式将优先于第二个媒体查询中包含的样式
  • 尝试删除第三个媒体查询,然后看看您是否感到高兴

    @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****/}
    

    您的设备屏幕宽度是多少?这还取决于设备浏览器对标准的执行情况。什么是设备和浏览器(又称用户代理)?
    @media only screen and (max-width:400px) 
    {/***style****/}
    
    @media only screen and (min-width:401px) and (max-width:700px) 
    {/***style****/}