如何使用媒体查询在小屏幕上移除图片的border-radius？

问题原因 #

你编写的CSS中，媒体查询的img规则写在普通img规则之前，而两者选择器优先级相同，CSS中相同优先级的规则，后声明的会覆盖先声明的，导致屏幕宽度小于375px时，border-radius: 0的设置被后面的border-radius: 25px覆盖，无法生效。

修复方案 #

方案1：调整CSS声明顺序（推荐） #

把媒体查询代码移到普通img样式的后面，这样当媒体查询条件触发时，后声明的规则会覆盖之前的：

img {
    width: 100%;
    border-radius: 25px;
}

@media screen and (max-width: 375px) { 
  img {    
        border-radius: 0;
  }
}

方案2：提高媒体查询规则的优先级 #

如果不想调整顺序，可以通过增加选择器特异性来提升媒体查询中规则的优先级，比如结合父元素figure：

@media screen and (max-width: 375px) { 
  figure img {    
        border-radius: 0;
  }
}

img {
    width: 100%;
    border-radius: 25px;
}

效果验证 #

修改完成后，当屏幕宽度≤375px时，图片的圆角会被移除；屏幕宽度大于375px时，图片保持25px的圆角效果。

内容的提问来源于stack exchange，提问作者Ulash