实现场景描述:

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

实现方法:

CSS控制判断

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

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

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

的1221px表示如果屏幕尺寸达到了1221像素以下将会隐藏否则显示。具体数值可以自行调试)

本文源自: 钻芒博客

原文链接: https://www.zmki.cn/5001.html

自动PC端显示 手机端隐藏CSS代码判断实现的更多相关文章

  1. 山西大同大学教务处学生端--送给学弟,学妹的礼物,可在PC端,手机端操作

    解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...

  2. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  3. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

  4. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  5. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  6. 山西大同大学教务处教师端——可在PC端,手机端操作

    解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端  / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...

  7. 自动判断PC端、手机端跳往不同的域名JS实现代码

    输入相同域名,在pc端和移动端会出现不同的页面效果,一种是用栅格系统实现自适应, 更多的是设计两套不同的模板和两个二级域名或者一个主域名和一个二级域名(就是有区别就可以了); js代码判断浏览器的用户 ...

  8. Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则

    一:HTTP和HTTPS的区别 HTTP是超文本传输协议,被用在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,因此HTTP协议不适合传输一些敏感信息, ...

  9. 判断是pc端还是手机端,并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

随机推荐

  1. Spring Boot 使用 JAX-WS 调用 WebService 服务

    除了 CXF 我们还可以使用 Spring Boot 自身默认的组件 JAX-WS 来实现 WebService 的调用. 本项目源码 github 下载 1 新建 Spring Boot Maven ...

  2. Cisco AP-ROMMON升级AP镜像

    Rommon is Cisco bootloader for their Router devices >>>ROMMON是思科设备的引导加载程序while U-boot is a ...

  3. re.compile匹配

    import re string = '<h4 class="title">愤怒的葡萄</h4>' pattern = '<h4 class=&quo ...

  4. 「JSOI2011」棒棒糖

    「JSOI2011」棒棒糖 传送门 双倍经验 考虑主席树做法. 对于当前的主席树节点,如果 \(\le mid\) 的个数足够就往左边走,否则就尝试往右边走,都不行就返回 \(0\). 参考代码: # ...

  5. Spark以yarn方式运行时抛出异常

    Spark以yarn方式运行时抛出异常: cluster.YarnClientSchedulerBackend: Yarn application has already exited with st ...

  6. BugkuCTF解题Web基础(一)

    Web2 打开链接看见一张动图,猜测flag应该就在网页前端源码里面 没有问题 计算器 典型的修改前端代码题目,题目让你计算结果,但只能填写一位数字. f12打开控制台,改代码maxlength we ...

  7. SpringBoot笔记二:整合篇

    Spring Boot与缓存 jsr-107 Java Caching定义了5个核心接口分别是CachingProvider, CacheManager, Cache, Entry 和 Expiry. ...

  8. EOS主网搭建教程--&&--搭建节点--&&--搭建mongodb数据库

    EOS主网搭建教程: 1.git clone https://github.com/EOS-Mainnet/eos.git --recursive 2.cd eos 3.git tag (查看有哪些分 ...

  9. spring boot 中容器 Jetty、Tomcat、Undertow

    spring boot 中依赖tomcat <dependency> <groupId>org.springframework.boot</groupId> < ...

  10. 学习笔记(14)- SQuAD的数据格式

    BERT模型完成问答任务的时候,需要数据格式为SQuAD形式. 有2个版本,1.1和2.0