服务器与VPS
促销优惠信息

DIV+CSS判断手机端和电脑端并显示或隐藏网页内容的代码

我们做网站,有时候需要在电脑端显示某些内容而在手机端隐藏内容,有时候又需要让某些内容只在手机端显示而在电脑端页面隐藏起来,这种判断客户端并显示或隐藏内容的代码,可以用DIV+CSS代码来控制。实现原理是由CSS判断显示终端的显示宽度,然后DIV控制显示或者隐藏内容代码。

一、电脑端显示,手机端隐藏的代码

css代码:

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

div代码:

<div class="wppc">显示的内容</div>

一、电脑端显示,手机端隐藏:

css:

/* 宽度低于900手机端隐藏 */
@media screen and (max-width: 900px) {
.wppc {
display: none;
}
}

div:

<div class="wppc"> 隐藏内容</div>

 

二、电脑端隐藏,手机端显示的代码

CSS代码:

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

DIV代码:

<div class="wpsj">隐藏的内容</div>

判断屏幕宽度>768px则隐藏DIV内容。

 

这些显示或者隐藏网页内容的需求都是我们平时自己建站用得到的,如果每一次都需要自己去写,或者每一次都需要到处去找太浪费时间了,所以楚狂人会有选择的收集并整理这些常用代码,发布在网站的代码专区,以备大家有需要时取用,害怕找不到的朋友可以 CTRL+D 收藏一下。

腾讯云代金券
腾讯云代金券
新客户无门槛领取价值高达2860元代金券,每种券限量500张,先到先得。
赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权

文章名称:《DIV+CSS判断手机端和电脑端并显示或隐藏网页内容的代码》

文章链接:https://www.chukuangren.com/shouji-diannao-yincangdaima.html

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址