CSS代码实现自适应判断,PC端显示 手机端隐藏

CSS代码实现自适应判断,PC端显示 手机端隐藏

场景需求描述:

在网站搭建过程中有些内容模块部署在PC端可以,但是有不适合在手机端显示,所以我们希望这个模块只在PC端展示,而在手机端这个模块自动隐藏,我们就会用到CSS代码实现自适应判断,这个方法就能完美的实现!

参考方法:

1.在CSS文件中添加判断控制

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

2.在需要隐藏的区域加一个DIV,代码如下:

<div class="wapnone">
你要css判断隐藏的代码内容
</div>

注意:CSS代码中的1221px表示如果屏幕尺寸达到了1221像素以下将会隐藏否则显示,具体数值请根据实际运用自行调试!

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享