Div+CSS内容只在电脑端展示,移动端隐藏的方法

84次阅读
没有评论

共计 379 个字符,预计需要花费 1 分钟才能阅读完成。

有这个需求是因为博主给网站首页加了友情链接板块,但是橘子君只想让这个板块在电脑端展示,在移动端隐藏起来。为此,我在网上也查找方法,发现很少有人介绍,毕竟有这个需求的人可能不多。后来还是让博主发现了一个 Div+CSS 内容只在电脑端展示,移动端隐藏的方法,特此记录以供参考。

实现方法

想要隐藏网页某段内容,可以在它的前面新加一个 Div,参考代码如下:

<div class="none"> 需要隐藏的内容 </div>

然后对 Div 添加一个样式,代码如下:

@media screen and (max-width: 560px) {.none{display:none;}}

PS:将上面的样式加入到 CSS 文件中,样式的意思是当屏幕尺寸达到 560 像素以下将会自动隐藏该 Div 层,如果你也想如此操作,站长可对数值进行调整。预览效果可以查看本站首页的友情链接板块,在手机端将对内容进行隐藏。

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-06-03发表,共计379字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)