卡卡网

对联广告的设计，跟嵌入网页内的广告设计有点不同，为了不影响用户体验，对联广告需要在尺寸上根据访客浏览器分辨率的不同而有所改变，以便对联不遮住网页内容，不影响用户的正常浏览网页内容。考虑到这一点，百度联盟就有一个规定，使用对联广告要设置仅当分辨率大于1024才显示。那么，要怎样设计不同浏览器分辨率显示不同尺寸的对联广告呢？代码要怎样写呢？这是本文要解决的问题。

对联设计思路

其实，思路很简单，就是事先设计两套对联图片，一套是浏览器分辨率大于1024时显示，另一套是浏览器分辨率小于1024时显示。为什么要以1024为分界点呢？因为以前的网页多数是以宽度为1024来设计的，在分辨率1024的情况下，网页宽度刚好跟屏幕宽度一样，当分辨率大于1024时，网页宽度到屏幕两侧会有一段间距，这段间距刚好适合放一个对联。看看如下两张截图就明白了。

分辨率1024x768

分辨率1440x900

上面两图来自卡卡网www.webkaka.com，卡卡网的对联设计便是采用了这种方式，事先设计两套对联图片，一套是浏览器分辨率大于1024时显示，另一套是浏览器分辨率小于1024时显示。

对联实现代码

其实，实现起来是很容易的，我们无非就是要先判断一下浏览器的分辨率，用一段JS代码就能轻松实现。

代码如下：

var iScreenWidth = window.screen.width; //获得浏览器分辨率
if(iScreenWidth <= 1024){
//显示分辨率小于等于1024的对联
...
}
else{
//显示分辨率大于1024的对联
...
}

您可能对如下文章也感兴趣

纯CSS(非JS)代码实现固定对联的方法 超短超实用！

标签: 对联