自动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，我们将及时沟通与处理。本站内容学习于网络所得，涉及言论、版权与本站无关。