卡卡網(wǎng)

對(duì)聯(lián)廣告的設(shè)計(jì)，跟嵌入網(wǎng)頁(yè)內(nèi)的廣告設(shè)計(jì)有點(diǎn)不同，為了不影響用戶(hù)體驗(yàn)，對(duì)聯(lián)廣告需要在尺寸上根據(jù)訪客瀏覽器分辨率的不同而有所改變，以便對(duì)聯(lián)不遮住網(wǎng)頁(yè)內(nèi)容，不影響用戶(hù)的正常瀏覽網(wǎng)頁(yè)內(nèi)容?？紤]到這一點(diǎn)，百度聯(lián)盟就有一個(gè)規(guī)定，使用對(duì)聯(lián)廣告要設(shè)置僅當(dāng)分辨率大于1024才顯示。那么，要怎樣設(shè)計(jì)不同瀏覽器分辨率顯示不同尺寸的對(duì)聯(lián)廣告呢？代碼要怎樣寫(xiě)呢？這是本文要解決的問(wèn)題。

對(duì)聯(lián)設(shè)計(jì)思路

其實(shí)，思路很簡(jiǎn)單，就是事先設(shè)計(jì)兩套對(duì)聯(lián)圖片，一套是瀏覽器分辨率大于1024時(shí)顯示，另一套是瀏覽器分辨率小于1024時(shí)顯示。為什么要以1024為分界點(diǎn)呢？因?yàn)橐郧暗木W(wǎng)頁(yè)多數(shù)是以寬度為1024來(lái)設(shè)計(jì)的，在分辨率1024的情況下，網(wǎng)頁(yè)寬度剛好跟屏幕寬度一樣，當(dāng)分辨率大于1024時(shí)，網(wǎng)頁(yè)寬度到屏幕兩側(cè)會(huì)有一段間距，這段間距剛好適合放一個(gè)對(duì)聯(lián)?？纯慈缦聝蓮埥貓D就明白了。

分辨率1024x768

分辨率1440x900

上面兩圖來(lái)自卡卡網(wǎng)howtostagehomes.com，卡卡網(wǎng)的對(duì)聯(lián)設(shè)計(jì)便是采用了這種方式，事先設(shè)計(jì)兩套對(duì)聯(lián)圖片，一套是瀏覽器分辨率大于1024時(shí)顯示，另一套是瀏覽器分辨率小于1024時(shí)顯示。

對(duì)聯(lián)實(shí)現(xiàn)代碼

其實(shí)，實(shí)現(xiàn)起來(lái)是很容易的，我們無(wú)非就是要先判斷一下瀏覽器的分辨率，用一段JS代碼就能輕松實(shí)現(xiàn)。

代碼如下：

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

您可能對(duì)如下文章也感興趣

純CSS(非JS)代碼實(shí)現(xiàn)固定對(duì)聯(lián)的方法 超短超實(shí)用！

標(biāo)簽: 對(duì)聯(lián)