CSS代码判断实现PC端隐藏 手机端显示

CSS代码判断实现PC端隐藏 手机端显示,有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等。我们可以使用下面的代码来实现:电脑端显示,手机端隐藏

有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等。我们可以使用下面的代码来实现:电脑端显示,手机端隐藏

实现方法
CSS判断控制路:

.wppc{
    display: none;
}
@media (max-width: 767px) {
  .wppc{
    display: block !important;
  }
}

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

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

在窗口大小超过767px会自动隐藏,小于则显示。

 

原创文章,作者:howkunet,如若转载,请注明出处:https://www.intoep.com/frontend/2431.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2021年11月24日 09:17
下一篇 2021年11月25日 15:30

相关推荐

  • CSS终于在2024年增加了垂直居中功能align-content:center

    CSS终于在 2024 年增加了垂直居中功能align-content: center,CSS 对齐一般会使用 flexbox 或 grid 布局,因为 align-content 在默认的流式布局中不起作用。在 2024 年,浏览器实现了 align-content。

    2024年9月2日
    0500
  • 前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览

    前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览。docx文件实现前端预览,pdf实现前端预览,excel实现前端预览,pptx的前端预览

    2022年4月21日 JavaScript
    01100
  • 前端上传大文件怎么处理

    背景 当我们在做文件的导入功能的时候,如果导入的文件过大,可能会导所需要的时间够长,且失败后需要重新上传,我们需要前后端结合的方式解决这个问题 思路 我们需要做几件事情如下: 对文…

    JavaScript 2022年1月19日
    01120
  • 先睹为快即将到来的HTML6

    先睹为快即将到来的HTML6。随着 HTML5 的普及,在 2014 年,这种标记语言发生了很多变化,变得更加友好,浏览器对新标准的支持热度也越来越高。而HTML并不止于此,还在不断发生变化,并且可能会获得一些特性来证明对 HTML6 的命名更改是合理的。

    2021年11月24日
    02.8K0
  • AI智能助手
  • 手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式

    在手机浏览器上打开某个网站的时候,菜单中有这么一个选项”添加到主屏幕”,当然不同的手机改菜单选项的名字有所不同基本上叫”添加到桌面”…

    Html/CSS 2022年1月28日
    09470
  • 常用的一些CSS代码规则

    常用的一些CSS代码规则:限制视口内的内容宽度、增加正文文本大小、增加文本行之间的间距、限制图片宽度、限制内容中文本的宽度、以更平衡的方式包裹标题、表单控件颜色与页面样式匹配、易于跟随的表格行

    2024年8月8日 Html/CSS
    0430

发表回复

登录后才能评论
分享本页
返回顶部