如何使用媒体查询消除小屏幕上的边框半径？

Question

我一直在尝试为每种屏幕尺寸设计我的网站，我想做的是当屏幕尺寸小于 375px 时消除我的 img 的边框半径。我已经尝试过 css media at-rule 但没有成功。

HTML：

`<figure>
   <img src="image-omelette.jpeg" alt="">
</figure>`

CSS：

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

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

Answer 1

确保您的媒体查询位于基本样式之后。你的 CSS 应该是这样的：

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

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