CSS 媒体查询在可视化正确的图像大小和边距方面存在问题

Question

我正在尝试使用 CSS 媒体查询根据检测到的屏幕尺寸添加边距并减小图像尺寸。但是由于一个或另一个我无法弄清楚代码无法正常工作的原因。 什么不起作用： 当您切换到移动设备时，它不会增加边距，也不会缩小图像尺寸。平板也一样。 能帮帮我吗？下面是我的代码：

    <!DOCTYPE html>
<html>
<head>

    <style type="text/css">
.icon-cardPayments-security
    {
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    width: 240px; height: 58px; 
    background-size: 240px 58px;
    margin-right: 10px;
    }

    @media screen and (max-width:434px) {
    .icon-cardPayments-security(      margin-right: 50px;
    margin-left: 70px;
    margin-bottom: 10px;
    margin-right: 10px;
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    background-position: 0px 0px;
    width: 160px; height: 36px; 
    background-size: 160px 36px;)

    }
    @media screen all and (min-width: 1140px) {
    .icon-cardPayments-security(  
    margin-right: 10px;
    background-position: 0px 0px;
    width: 240x; height: 58px; 
    background-size: 240px 58px;)
    }

    @media  screen and (min-width: 569px) and (max-width:1139px) {
    .icon-cardPayments-security(  width: 160px; height: 58px; background-size: 160px 58px; margin-right: 10px; margin-right: 10px;)}

    </style>

    <title></title>
</head>

<body>
    <ul class="payment-types__items">
        <li class="footer__bottom-list-item icon-cardPayments-security" title=
        "Payment Options">&nbsp;</li>

        <li class="footer__bottom-list-item icon-norton-security" title=
        "Powered by VeriSign">&nbsp;</li>

        <li class="footer__bottom-list-item icon-trustpilot" title=
        "Trustpilot">&nbsp;</li>
    </ul>
</body>
</html>

Answer 1

您在选择器后使用了括号，应该是括号 .classname{} :

.icon-cardPayments-security {
    background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
    width: 240px;
    height: 58px;
    background-size: 240px 58px;
    margin-right: 10px;
}
@media screen and (max-width:434px) {
    .icon-cardPayments-security {
        margin-right: 50px;
        margin-left: 70px;
        margin-bottom: 10px;
        margin-right: 10px;
        background-image: url(https://imagizer.imageshack.us/v2/620x140q90/661/XZglD4.png);
        background-position: 0px 0px;
        width: 160px;
        height: 36px;
        background-size: 160px 36px;
    }
}
@media screen all and (min-width: 1140px) {
    .icon-cardPayments-security {
        margin-right: 10px;
        background-position: 0px 0px;
        width: 240x;
        height: 58px;
        background-size: 240px 58px;
    }
}
@media screen and (min-width: 569px) and (max-width:1139px) {
    .icon-cardPayments-security {
        width: 160px;
        height: 58px;
        background-size: 160px 58px;
        margin-right: 10px;
        margin-right: 10px;
    }
}

CSS 媒体查询在可视化正确的图像大小和边距方面存在问题

CSS media queries issue with visualizing the right image size and margin

html

css

media-queries

responsive-design