This page was saved using WebZIP 7.1.2.1052 offline browser on 10/07/21 15:44:56.
Address: /webcms/716.html
Title: 自动PC端隐藏 手机端显示CSS代码判断实现自适应_【帝搜SEO软件】  •  Size: 45444  •  Last Modified: Wed, 07 Jul 2021 18:46:45 GMT
SEO优化|SEM推广|SMO营销|WEB开发|CI设计
当前位置:主页 > 帝搜SEO软件学院 > 短视频推广 > 自动PC端隐藏 手机端显示CSS代码判断实现自适应

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

发布日期: 2021-07-08 02:46:30 阅读次数: 编辑:帝搜SEO软件学院

本文摘要:我们在进行短视频推广的时候,特别是进行自适应短视频推广的时候,经常会碰到这样一类问题,就是如何当一个div只在电脑端现实,手机端隐藏,或者只在手机端显示,需要在电脑端隐藏呢! 一...

我们在进行短视频推广的时候,特别是进行自适应短视频推广的时候,经常会碰到这样一类问题,就是如何当一个div只在电脑端现实,手机端隐藏,或者只在手机端显示,需要在电脑端隐藏呢!

一、电脑端隐藏,手机端显示的方法

 
比如我们常常做的手机端菜单,当然只在手机端有即可。

CSS判断控制路:

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

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

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

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

 

二、电脑端显示,但手机端需要隐藏的方法

比如我们做的电脑端侧边栏,只要电脑端有即可。

CSS判断控制路:

.wppc{
    display: none;
}
@media (min-width: 767px) {
  .wppc{
    display: block !important;
  }
}
全选
复制

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

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

在窗口大小超过767px会自动隐藏,小于则显示。
当然,有优网络科技的SEO官网,并不是一个自适应的网站,他是手机端和电脑端都独立设计的网站,但却是共用一个数据库的网站。


版权与免责声明 SEO排名优化SEM竞价托管SMO媒体营销WEB短视频推广, CI品牌设计 互联网整合营销推广服务商帝搜软件网络声明:如发现内容存在版权问题,烦请提供相关信息发邮件至603165717@qq.com,我们将及时沟通与处理。本站内容学习于网络所得,涉及言论、版权与本站无关。
友情链接:抖音SEO优化 小红书笔记排名 知乎搜索排名 微信搜一搜排名 抖音下拉词 抖音搜索排名 帝搜官网 帝搜软件全国技术招商