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张，先到先得。

￥2860

点击领取>>