[付费] 使房屋广告具备响应式

[Juan_Adamuz]

如果您阅读了站内广告帖子，会发现它们提供了设置桌面和移动设备图片的方法。

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

只需为每种设备设置对应的图片（手机宽度较小，桌面宽度较大），就完成了！

我个人使用的尺寸如下：

• 移动设备：1282x311
• 桌面设备：755x90

然后创建一个组件，并添加以下 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 更有意义！