【技术笔记】div+css电脑端显示手机端隐藏代码

发布于 2019-10-21  1.79k 次阅读


实现场景:在小屏手机上或者是PAD上把指定区域的内容隐藏,电脑端不变。比如一段广告或者一个说明只想要在电脑端显示手机端隐藏。

实现方法:

在需要隐藏的区域加一个DIV,例如想在手机端隐藏bigpic这张图片,代码如下:

<div class="none"><img src="https://www.zhaiike.com/bigpic.jpg"/></div>

然后把DIV加一个样式代码如下:

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

(注意啦!上面的980px表示如果屏幕尺寸达到了980像素以下将会隐藏否则显示。具体数值可以自行调试)

20191021 115204 【技术笔记】div+css电脑端显示手机端隐藏代码
【技术笔记】div+css电脑端显示手机端隐藏代码

郑州90后一名计算机爱好者,希望能通过网络结交更多朋友!