如果低于特定浏览器宽度，则不显示链接答案

【问题标题】：Do not display a link if below particular browser width如果低于特定浏览器宽度，则不显示链接
【发布时间】：2014-10-16 15:12:05
【问题描述】：

我有一个链接：

<a class="twitter-timeline"  href="https://twitter.com/vhakhikhang" data-widget-id="520463403060432896">Tweets by @vhakhikhang</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>

我不希望它在浏览器宽度低于 800 像素时显示。我该怎么做？

【问题讨论】：

您可以添加此媒体查询：@media (max-width: 800px) { .twitter-timeline { display: none; } }

标签： javascript html css browser-width

【解决方案1】：

您可以将以下媒体查询添加到您的 CSS

@media only screen and (max-width: 800px) {
   .twitter-timeline { display: none;}
}

当您的窗口大小低于 800 像素时，这将隐藏您的链接。

请在您的 HTML 头部添加以下元标记，如果没有此元标记，您的媒体查询将不会反映在移动设备或宽度小于您在媒体查询中指定宽度的设备中。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：