在广告中国论坛的背景广告上应用responsive design

Avazu 在广告中国论坛投放了一个非常漂亮的背景广告,样式很新颖,也没有影响到论坛的整体布局,俺非常的喜欢。

但是当我用iPad 浏览论坛的时候,发现了一个问题,那就是右边的背景广告影响了整个布局。详细内容请看下面的截图:

广告中国

 

可以很明显的看到屏幕右侧的背景广告。按道理,他是应该不占地方才对的。

我不是什么css guru,也不是什么前端开发人员。没办法,只能从 bootstrap 上学习一下,使用css 3中的新特性。

首先,在discuz 的header 中加入

<metaname=“viewport”content=“width=device-width, initial-scale=1.0”>

这样能保证对移动设备的友好。然后avazu 的background css 代码中加入

@media screen and (max-device-width: 1320px) {

#body-bg{position:absolute; width:0;}
#body-bg a{background:none;}
#body-bg a:hover{background:none;}

刷新一下css缓存,我们能够看到这个问题已经完美解决了。

advertcn new background

现在能够感觉整个页面还是不错的。。。

不过话说avazu 的前端设计人员蛮厉害的,硬是整个css框架的外面把背景图片加上了。

最后赞美一下,bootstrap真的好厉害。。成熟。。。