[مدفوع] اجعل إعلانات المنزل متجاوبة

[Juan_Adamuz]

إذا قرأت منشورات الإعلانات الداخلية، فستجد طريقة لإعداد صورة للشاشات المكتبية وصورة للهواتف المحمولة.

<a href="" class="banner-ad" target="_blank">
    <img class="desktop" src="">
    <img class="mobile" src="">
</a>

ما عليك سوى تعيين الصور لكل منها (عرض أقل للهواتف وعرض أكبر للشاشات المكتبية) وهذا كل شيء!

أنا شخصياً أستخدم الأبعاد التالية:

• للهواتف المحمولة: 1282×311
• للشاشات المكتبية: 755×90

ثم قم بإنشاء مكون وأضف تنسيقات CSS التالية:

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: flex;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
    background-color: #FEF25E;
    border: 1px solid $primary;
    box-sizing: border-box;
    img {
        height: 90px;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
            width: 100%;
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        p {
            margin: 0;
            &.small {
                font-weight: bold;
                text-align: right;
                padding: 1px 5px;
                background-color: #000000;
                color: #FFFFFF;
            }
            &.big {
                font-size: 24px;
                line-height: normal;
                padding-bottom: 5px;
                color: #434343;
                font-weight: lighter;
            }
        }
        .cta {
            color: $cta-text-color;
            background-color: $cta-background-color;
            &:hover {
                background-color: darken($cta-background-color, 20%);
            }
        }
    }
}

@media only screen and (max-width: 672px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
        }
        .container {
            justify-content: center;
            .cta {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }
}

أبعاد غريبة لكنها تعمل! يمكنك رؤيتها حية هنا

ليس من المجدي دفع ثمن هذا… ربما يكون التبرع لمنصة Discourse أفضل!