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

Question

我想更改下面的一段css：

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

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

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

Answer 1

我很确定你需要Media Queries

例如

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