html5自适应页面在电脑手机端放置不同广告的方法

1.jpg

现在我们看到好多网站都使用了html5技术,使其实现了自适应功能,但是咱们的广告却是固定尺寸,自适应站点添加广告怎么办,因为PC端增加了广告,到移动端会变形或者显示不全或者根本不显示,这样一来很多站长会感到迷惑,我们应当如何在html5自适应页面放置联盟广告呢?今天念鲜就教给大家一种通过判断浏览网页的设备屏幕大小,从而分别加载不同广告代码的方法。

首先,我们先找到这个站点的主CSS,或者不用找CSS,直接在模板或者页面里添加以下CSS:
.pcd_ad{display:block;}
.mbd_ad{ display:none}
@media(max-width:768px) {
.pcd_ad{display:none !important;}
.mbd_ad{display:block !important;}
}

上面CSS的意思大概:
display:block  这是显示的意思
display:none 这是隐藏的意思
@media(max-width:768px)  判断页面宽度小于768PX的时候显示后面{}的样式。

然后,我们要找到自己想添加广告的地方,然后插入以下代码:(找不到?这个没法教程,意思就是模板里你想显示广告的地方!)
<div class="pcd_ad">电脑端广告代码</div>
<div class="mbd_ad">手机移动端广告代码</div>

好了,就是那么简单,然后该更新更新,该刷新刷新。可以看效果了!

你可能想看:
标签: 代码广告CSS
分享给朋友: