指引网

当前位置: 主页 > 网站运营 > 建站经验 >

不同浏览器分辨率显示不同尺寸的对联广告【JS代码实现】

来源:网络 作者:佚名 点击: 时间:2017-08-08 22:55
[摘要] 对联广告的设计,跟嵌入网页内的广告设计有点不同,为了不影响用户体验,对联广告需要在尺寸上根据访客浏览器分辨率的不同而有所改变,以便对联不遮住网页内容,不影响用户的正常浏

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

对联设计思路

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

分辨率1024x768

分辨率1024x768

分辨率1440x900

分辨率1440x900

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

对联实现代码

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

------分隔线----------------------------