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

**URL:** <https://meta.discourse.org/t/paid-make-house-ads-responsive/127537>\
**Category:** Marketplace\
**Created:** [2019年九月4日 02:22 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537 "2019-09-04T02:22:31Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Juan\_Adamuz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/juan_adamuz/32/86808_2.png) [@Juan\_Adamuz](https://meta.discourse.org/u/Juan_Adamuz)\
**Post date:** [2019年九月4日 07:04 UTC](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537/3 "2019-09-04T07:04:43Z")

</div>

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

```
<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;
            }
        }
    }
}

```

尺寸看起来有些奇怪，但效果很好！您可以在[这里](https://foro.progamingstudio.com)查看实际效果。

为这个功能付费并不划算……或许不如直接捐款给 Discourse 更有意义！

---

_[View the full topic](https://meta.discourse.org/t/paid-make-house-ads-responsive/127537)._