CSS媒體查詢問題可視化正確的圖像大小和邊距

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


I am trying to add margin and reduce an image size based on the detect size of the screen using CSS media queries. However for one or another reason which I can not figure out the code is not working. What is not working: When you switch to mobile it is not adding the margins and it is not reducing the image size. The same with the tablet. Can you please help me? Below is my code:

我正在嘗試使用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>

1 个解决方案

#1


1  

You are using parenthesis after you selector, that should be bracket .classname{} :

您在選擇器后使用括號,它應該是括號.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;
    }
}

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/22/724ef3112f1d0b0ba837762fe90168fb.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com