1. 首页 > 经验分享

手机访问隐藏,电脑访问显示CSS代码

我们经常在做自适应网站的时候遇到一些问题,比如PC端文字太长自适应手机端显示的时候不好看,或者电脑端的边栏在手机端显示会拉长页面等等问题。
今天我就教大家来解决这个问题,其实这个问题很简单,我们只需要一行代码加一个DIV标签就可以解决了。


这个是白成建博客网站上的电脑端界面,网站是自适应显示的,我想在手机访问的时候隐藏红框内的内容,只需要在我们不想在手机端显示的内容上面添加以下代码即可。

<div class="id_name">
  
你不想在手机端显示的内容
 
</div>
 
接下来我们在CSS里面加入样式代码
 
@media (max-width: 768px){.id_name{display:none;}}
 
//max-width 这里的意思是大于宽度,我们也可以改成小于宽度,这样就可以反过来,在手机端显示,电脑端隐藏了
 
//768px的意思就是768像素

然后我们添加好代码之后就可以查看具体效果了

OK,我们想要的效果已经实现了,很简单吧。

本文由白成建博客发布,转载联系作者并注明出处:https://www.baichengjian.com/jingyanfenxiang/324.html

联系博主

在线咨询:点击这里给我发消息

微信号:bai-chengjian

工作日:8:30-17:30,节假日休息