欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > 如何用CSS实现PC端显示 手机端隐藏代码效果
这篇文章主要为大家详细介绍了如何用CSS实现PC端显示 手机端隐藏代码效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

接着我们上一次给大家介绍的 《响应式网站如何布局广告代码 页面不同宽度显示不同广告实现办法》,今天草根学习网给大家带来的是 如何用CSS实现PC端显示手机端隐藏代码效果 。

如何用CSS实现PC端显示 手机端隐藏代码效果

实现场景描述:

在小屏手机上或者是PAD上把指定区域的内容隐藏,电脑端不变。比如一段广告或者一个说明只想要在电脑端显示手机端隐藏。这样的情境里我们需要利用到下面的技术。

实现方法:

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

<div class="wapnone"><img src="http://www.ke361.com/bigpic.jpg"/></div>

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

@media screen and (max-width: 1221px) { .wapnone{display:none; }
}
注意啦!上面的1221px表示如果屏幕尺寸达到了1221像素以下将会隐藏否则显示。具体数值可以自行调试)

你学会了吗?

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 判断显示

上一篇响应式网站如何布局广告代码 页面不同宽度显示不同广告实现办法

下一篇织梦dedeCMS留言(自定义)表单提交时把内容发送到指定邮箱

延伸阅读

《如何用CSS实现PC端显示 手机端隐藏代码效果》期待您的评论!

评论功能暂时关闭!:)。
取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在