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

Question

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

Tuga Sunwear - Gift Card

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%;
    }
}