自动PC端隐藏手机端显示CSS代码判断实现自适应_程序开发

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

发布日期：2021-07-07 18:46:30 阅读次数：1240 编辑:优爱SEO学院

本文摘要：在互联网时代飞速发展的前景下加上昂贵的竞价费用让多数企业苦不堪言于是低成本投入的职业-seo就诞生了，从业人数也每年呈递增状态，然而互联网的垃圾信息也越来越多，于是搜索引擎为了更好的迎合用户体验也频繁的展开了各项算法调整。在这期间当然也有很多网站被降权甚至被K掉，至于什么原因...

我们在进行网站建设的时候，特别是进行自适应网站建设的时候，经常会碰到这样一类问题，就是如何当一个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网站优化，SEM广告优化，SMO口碑营销，WEB建站开发, 网络舆情优化 互联网整合营销推广服务商优爱网络声明：如发现内容存在版权问题，烦请提供相关信息发邮件至2820075653@qq.com，我们将及时沟通与处理。本站内容学习于网络所得，涉及言论、版权与本站无关。