Question

我试图让twitter嵌入小部件响应，为此，我需要将高度设为百分比。目前我正在使用来自here

的默认twitter嵌入

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

这是我的代码;

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 Feed的高度响应，那将会有很大的帮助！

提前致谢。 PS。我没有使用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。

响应的推特高度

1 个答案: