SEO优化|网络推广|整合营销|网站建设_提升品牌价值
当前位置:主页 > 优爱SEO学院 > 网站建设 > 自动PC端隐藏 手机端显示CSS代码判断实现自适应

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

发布日期: 2020-11-29 23:28:41 阅读次数: 编辑:优爱SEO学院

本文摘要:我们在进行网站建设的时候,特别是进行自适应网站建设的时候,经常会碰到这样一类问题,就是如何当一个div只在电脑端现实,手机端隐藏,或者只在手机端显示,需要在电脑端隐藏呢! 一、电脑端隐藏,手机端显示的方法 比如我们常常做的手机端菜单,当然只在手机端有即可。 CSS判断控制路: .wppc...

我们在进行网站建设的时候,特别是进行自适应网站建设的时候,经常会碰到这样一类问题,就是如何当一个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官网https://www.uiseo.net,并不是一个自适应的网站,他是手机端和电脑端都独立设计的网站,但却是共用一个数据库的网站。


版权与免责声明 品牌网站建设SEO整站优化小程序开发, 网络营销推广 互联网整合营销推广服务商优爱网络声明:如发现内容存在版权问题,烦请提供相关信息发邮件至2820075653@qq.com,我们将及时沟通与处理。本站内容学习于网络所得,涉及言论、版权与本站无关。