Html 如何仅为桌面浏览器更改此CSS？

我想更改以下css：

ul.deals > li > a > img {
border-radius: 5px;
border-width: 0;
min-height: 200px;
width: 100%;
}

这就是CSS，它非常适合移动设备——图像很好地填充了屏幕的宽度。然而，当在桌面浏览器上查看时，图像会增长到窗口宽度（根据css请求），但这看起来很糟糕，因为图像非常拉伸

我怎样才能告诉上面的css只适用于移动设备，并允许我编写一些特定于更大尺寸设备的css？

我很确定您在这里需要它

比如说

@media only screen and (max-device-width: 480px) {
  ul.deals > li > a > img {
  border-radius: 5px;
  border-width: 0;
  min-height: 200px;
  width: 100%;
 }
}