html - 响应推特高度

Question

我正在尝试使 Twitter 嵌入小部件响应，为此我需要将高度设置为百分比。就目前而言，我使用的是 here 中嵌入的默认推特

那是说我可以在高级自定义中设置高度，但这仅适用于像素。

这是我的代码；

HTML:

        <div id="body-twitterFeed">
            <a class="twitter-timeline" href="https://twitter.com/ARavinMadMonkey" data-widget-id="347000705833398272" height="700" data-chrome="noscrollbar transparent" border-color="#DBDBDB">Tweets by @ARavinMadMonkey</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>               
        </div>

CSS:

#body-twitterFeed{
height: 80%;
padding: 5px 10px 5px 10px;
overflow: hide;

我试图使用 overflow:hide;隐藏 body-twitterFeed div 之外的任何内容，但这根本行不通。

如果有人能帮我想出一种方法来使 Twitter 提要的高度具有响应性，那将大有帮助!

提前致谢。附言。我没有使用 Bootstrap 或任何东西。

Answer 1

您需要设置类.twitterTimeline 的高度。

理论上这应该很容易:只需将其设置为窗口高度的比例(例如 40vh)。问题在于移动版 Safari 无法正确呈现 vh。

相反，我认为您需要使用媒体查询来设置高度，如下例所示:

@media screen and (max-height: 30rem) {
    .twitter-timeline {
        height: 15rem;
    }
}
@media screen and (min-height: 30rem) {
    .twitter-timeline {
        height: 30rem;
    }
}

如果您想了解更多关于媒体查询及其功能的信息，try reading this .