日志

CSS判断移动端隐藏代码

by 一顿得吃八碗, 2022-05-19


对于网站来说,有些内容在PC端很合理,但是不适合在移动端上显示。
今天修改我另一个网站的模板时遇到了这个问题,怕以后忘记,随手记下吧。
CSS代码:

@media screen and (max-width: 991px) { .wapnone{display:none; }
}
调用多个<class>
@media screen and (max-width: 991px) { .tool_cai,.tool_code,.tool_zan{display:none;}
}
调用ID
@media screen and (max-width: 991px) { #lzxPlayer{display:none;}
}

前端隐藏div代码:

<div class="wapnone">你要css判断隐藏的内容</div>
<div class="tool_cai">你要css判断隐藏的内容</div>
<div class="tool_code">你要css判断隐藏的内容</div>
<div class="tool_zan">你要css判断隐藏的内容</div>
<div id="lzxPlayer">你要css判断隐藏的内容</div>

如果屏幕尺寸小于991像素会隐藏否则显示,数值可以根据自己情况而定。

作者: 一顿得吃八碗

2 条评论
    wu先生 回复
    wu先生2022-05-23 11:13

    我虽然不是学代码的,但我也觉得这个非常有用

    土拨许 回复
    土拨许2022-05-22 20:59

    前几天刚好折腾过这个...

2022 © typecho & elise