Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >自动PC端隐藏手机端显示CSS代码判断实现

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

作者头像

AlexTao

修改于 2023-05-16 05:15:35

修改于 2023-05-16 05:15:35

3.8K00

代码可运行

举报

文章被收录于专栏：钻芒博客钻芒博客

运行总次数：0

代码可运行

上一篇说过在pc显示，手机隐藏的css案例。最近有用的到需要在电脑上自动隐藏手机端显示的例子。

PC显示手机隐藏:

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

实现场景描述：有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。我们可以…

实现方法:

CSS判断控制路:

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

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

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

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

相关链接:

百度知道: html+css如何能实现电脑端隐藏手机端显示
PC显示手机隐藏:自动PC端显示手机端隐藏CSS代码判断实现

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

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

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

AlexTao

2019/12/20

2.8K0

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

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

AlexTao

2019/12/28

3.5K0

B2模块的导航分类在手机端不显示？

从上图我们可以分析出这些分类的标签是存在前端的，只不过是用了display:none; 隐藏了。

小狐狸说事

2022/11/17

4390

B2模块的导航分类在手机端不显示？

HTML+CSS，PC端/手机端公用部分样式代码整理（建议收藏）

html css 网站

我们一般都会提一个 .overflow {overflow:hidden} 方便布局，也可以有效的阻止移动端上下左右拖动问题（溢出问题）

程序员纬度

2021/03/02

2.2K0

网页自适配手机端

博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。

sunonzj

2022/06/21

3K0

祝大家元旦快乐，给自己的博客加一个对联和灯笼

简单给大家聊一下，差不多25号我就放寒假了，放假回家一直在老家，大部分时间帮父母干农活

imzql

2022/01/04

4301

祝大家元旦快乐，给自己的博客加一个对联和灯笼

【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）

css html ios javascript

---- 💅文章概要：各位C站的小伙伴们，你想要获得一款精美的响应式登录页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！无论是电脑，手机还是平板都可以完美适配哦！ ---- 🤟每日一言：你可以遗憾，但是你绝对不能后悔。遗憾证明你努力过了，只是力有不逮。而后悔，只能说明你当时没努力过。 ---- 目录前言响应式布局介绍响应式登陆页面效果演示 PC端效果演示手机端效果演示 IPAD竖屏效果演示 IPAD横屏效果演示实现思路背景的设置 HTM

THUNDER王

2023/03/09

1.2K0

【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）

让一段HTML代码显示在桌面端网页而在移动端隐藏

这段代码的意思是当屏幕宽大小大于768px时执行{}内的css样式，即class名为id_name显示。

可定

2020/04/20

1.6K0

Bootstrap 响应式框架第一集

响应式：Responsive Web Page，又称为自适应网页，一个页面既可以在PC浏览器中正常访问，也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。

李才哥

2020/08/17

1.3K0

Bootstrap 响应式框架第一集

zblog怎么在移动端显示/隐藏侧栏模块

关于zblog主题模板手机移动端针对不同主题采用了不同的方案，有些是默认显示，有些不显示侧栏，总归没有一个完美的解决方案，所以今天就抽空水一篇文章，教大家怎么显示或者隐藏侧栏模板的内容。宁静致远主题没有侧栏，所以我们以这个主题模板为例，灌水开始。。。

李洋博客

2021/06/15

1.3K0

css页面自适应屏幕大小_html图片自适应屏幕

https java css 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170364.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/21

8.6K0

css页面自适应屏幕大小_html图片自适应屏幕

纯CSS实现侧栏卡片显隐

以前我有写过一篇基于Butterfly的手机端fixed定位侧栏布局魔改方案,抛开被洪哥忽悠而起的这么长的标题不谈，在这篇中是通过编写一个手机端fixed定位的样式，并通过js监测到对应的点击动作后，给相应的侧栏卡片添加上这个样式。同时也是通过js不断的进行样式初始化和class的增减。

Akilar

2023/03/08

1.1K0

BootStrap响应式项目实战之世界杯网页设计

系统响应式 bootstrap class 设计

c)在index.html里面做下引用；引用顺序bootstrap.css->jquery 3.3.1.js–>bootstrap.js

张哥编程

2024/12/13

4170

BootStrap响应式项目实战之世界杯网页设计

Css详细介绍

模型 css 布局继承浏览器

（就近原则）： !important > id > class > tag （!important 比内联优先级高）

FGGIT

2024/10/15

3690

HTML+CSS，PC端/手机端公用部分样式代码整理(自己收藏)

html jquery c++腾讯优客

我们一般都会提一个 .overflow {overflow:hidden} 方便布局，也可以有效的阻止移动端上下左右拖动问题（溢出问题）

用户5997198

2019/08/12

3K0

HTML 文件在PC&移动端完美自适应布局的技巧

本文作者：李晓玮，腾讯 IEG 高级工程师都2019年了，手机查看HTML邮件的体验怎么还那么差？试想一下，你在夜深人静的时候，准备睡前查看一下订阅的邮件周报，而且还是一个精心设计过的HTML富文本邮件。只不过它只能在pc上完美展现，在手机上最大的字号只有不到4像素，图片也变成了马赛克，会是一种怎样的虐心体验。最近做了一个群发邮件的手机端适配需求就是要解决这个体验问题，先上效果。优化前：优化后：当然，pc端和网页版也要完美适配，outlook、foxmail和网页版效果如下：

腾讯技术工程官方号

2019/10/31

4.6K0

HTML 文件在PC&移动端完美自适应布局的技巧

全新自适应地址发布页HTML源码【手机端】【pc端】

html 网站笔记手机源码

前言 🥇个人主页：@MIKE笔记 🥈文章专栏：网站源码合集全新自适应地址发布页HTML源码【手机端】【pc端】源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>发布页_MIKE笔记</title> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">

MIKE笔记

2023/03/23

2.1K0

全新自适应地址发布页HTML源码【手机端】【pc端】

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局。一、实用范围描述 - TOP CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网

庞小明

2018/03/07

2.5K0

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

css 面向对象编程 c++

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

艾编程

2022/12/05

1.9K0

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

JS:用rem来做响应式开发

html css bootstrap javascript

电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发（我现在知道的尚浅）目前我了解有

yuezhongbao

2019/03/13

6.5K0

相关推荐

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

更多 >

LV.2

钻芒控i站长

作者相关精选

换一批

目录

PC显示手机隐藏:

自动PC端显示手机端隐藏CSS代码判断实现
- 实现方法:
- 相关链接:

交个朋友

加入腾讯云官网粉丝站

蹲全网底价单品享第一手活动信息

加入讨论

的问答专区 >

大王叫我来巡山、0

相关课程

一站式学习中心 >

云开发微搭低代码平台-一人构建企业级应用实战训练营

腾讯云微搭低代码

AI代码助手快速上手训练营

腾讯云代码助手

AI驱动的TDSQL-Cserverless实战营

云原生数据库 TDSQL-C

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验