针对移动和大屏幕尺寸的 CSS 媒体查询

Question

我有一个客户的 Magento 商店，需要有特定的 ID/类，并根据屏幕尺寸更改“缩放”尺寸：

Tuga 太阳服 - 礼品卡

DIV ID 是“giftcard-template-back”，您可以通过在礼品卡背景图像上执行“检查元素”来找到它（文本有单独的类），这是我到目前为止所拥有的，但它不起作用：

@media screen and (min-device-width: 0px) and (max-device-width: 479px){
    #giftcard-template-back {
        zoom: 41%;
    }
}

@media screen and (min-device-width: 480px) and (max-device-width: 959px) {
    #giftcard-template-back {
        zoom: 67%;
    }
}
@media screen and (min-device-width: 960px) {
    #giftcard-template-back {
        zoom: 98%;
    }
}

当我禁用前面 DIV 的 41% 时，它可以工作。但我不知道如何完全关闭它。

我不太擅长移动 CSS，所以如果这需要一些可怕的清理，请告诉我。

我想做的是将“缩放”设置为 0px-479px、480px-959px 和 960px + 之间的显示百分比

我四处搜索了一下，但找不到任何与此完全一样的东西，最接近的是Media Queries - Stack Overflow，所以我很感谢你们所有人给我的帮助！

** 编辑 **

我已将“#”应用于类名称并更新了一点 CSS。桌面 960px+ 显示完美，但当我调整窗口大小时，它仍然加载 98% 缩放。有人有建议吗？

Answer 1

ID CSS 选择器以

#

开头，应该是

#giftcard-template-back

@media only screen and (max-device-width: 479px) {
  #giftcard-template-back {
     zoom: 41%;
  }
}    
@media only screen and (max-device-width: 959px) {
  #giftcard-template-back {
     zoom: 67%;
  }
}
@media only screen and (min-device-width: 960px) {
  #giftcard-template-back {
     zoom: 98%;
  }
}