东莞做网站 > 基础 >

设计CSS代码实现显示在PC网站或只显示在WAP端

来源:未知作者:admin发布时间:2018-03-26

 

我们在设计一个网站的时候,希望电脑网站(PC端)和手机网站(WAP端)进行自适应识别,以最佳的方式展示在屏幕上,但由于用户的设备、浏览器等原因,展示状况会不容乐观,网站设计师会努力解决这些问题,就像我们的网站一样,有些内容不想显示在手机端上影响美观,可以用以下网站设计方法!

今天,东莞做网站网编给大家介绍一个PC电脑网站与手机网站展示不一样的内容的方法(即:网站上有些内容,您只想展示给移动用户看,或者只想展示给电脑用户看,你都可以用这个方法来实现),这个方法实现起来相当简单,在网站设计时常会用到,
 
HTML模板中写入:
<div class="pc_only">
这里面的内容只能在PC端显示,手机网站是看不到的。
</div>
CSS里写入以下内容:
.pc_only{display:inline;}
@media screen and (max-width: 360px) {
.pc_only{display: none;}
 
相反,如果只想显示在WAP手机端,不让显示在PC端,操作就是反向的,对网站优化也是很好的。是不是很简单,只需要在式样表中判断一下浏览器的宽度即可,只要浏览器的最大宽度小于360像素,就隐藏这个层内容,否则就展示层内容,就可以达到目的了,经过测试是有效的。