對聯廣告的設計，跟嵌入網頁內的廣告設計有點不同，為了不影響用戶體驗，對聯廣告需要在尺寸上根據訪客瀏覽器分辨率的不同而有所改變，以便對聯不遮住網頁內容，不影響用戶的正常瀏覽網頁內容。考慮到這一點，百度聯盟就有一個規定，使用對聯廣告要設置僅當分辨率大于1024才顯示。那么，要怎樣設計不同瀏覽器分辨率顯示不同尺寸的對聯廣告呢？代碼要怎樣寫呢？這是本文要解決的問題。

對聯設計思路

其實，思路很簡單，就是事先設計兩套對聯圖片，一套是瀏覽器分辨率大于1024時顯示，另一套是瀏覽器分辨率小于1024時顯示。為什么要以1024為分界點呢？因為以前的網頁多數是以寬度為1024來設計的，在分辨率1024的情況下，網頁寬度剛好跟屏幕寬度一樣，當分辨率大于1024時，網頁寬度到屏幕兩側會有一段間距，這段間距剛好適合放一個對聯。看看如下兩張截圖就明白了。

分辨率1024x768

分辨率1440x900

上面兩圖來自卡卡網www.cuckooft.com，卡卡網的對聯設計便是采用了這種方式，事先設計兩套對聯圖片，一套是瀏覽器分辨率大于1024時顯示，另一套是瀏覽器分辨率小于1024時顯示。

對聯實現代碼

其實，實現起來是很容易的，我們無非就是要先判斷一下瀏覽器的分辨率，用一段JS代碼就能輕松實現。

代碼如下：

var iScreenWidth = window.screen.width; //獲得瀏覽器分辨率
if(iScreenWidth <= 1024){
//顯示分辨率小于等于1024的對聯
...
}
else{
//顯示分辨率大于1024的對聯
...
}

您可能對如下文章也感興趣

純CSS(非JS)代碼實現固定對聯的方法 超短超實用！

標簽: 對聯