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

Question

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

Tuga Sunwear - Gift Card

DIV ID 是“giftcard-template-back”，您可以通过在礼品卡背景图像上执行“inspect element”找到它(文本有单独的类)，这是我目前所拥有的，但它不起作用:

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