前段时间刚从月光博客转载了一篇自适应网页的设计方法，今天看到又更新了，有了个谷歌广告的自适应，收藏到博客先，以便以后的网站修改升级。

　　所谓自适应网页设计，就是让同一个网页代码，能够在不同设备上（从桌面电脑显示器到智能手机或其他移动产品设备）都能有更好的浏览体验，基本上对于双栏网站来说修改最简便，只要在HTML头部增加viewport标签，在CSS文件尾部增加针对不同屏幕分辨率的规则，布局宽度使用相对宽度，隐藏侧栏，半小时就能提升网站的手机移动浏览体验。

　　但是网站修改完成后，我们会发现原先的Google AdSense广告单元并没有实现自适应，浏览体验并不好，实际上，只要简单的几步操作，就能让Google AdSense广告实现自适应设计。

　　最简单的方法是新建一个广告单元，在“广告尺寸”里选择“自适应广告单元”即可，如下图所示，这个我们就不多讨论。

　　现在主要讨论一下原有的旧广告单元如何实现自适应设计。

　　首先，如果原有的Google AdSense广告代码类型为“同步”，则必须先将代码修改为“异步”代码，登录Google AdSense后台，在相应的广告单元里，点击“获取代码”，目前默认的代码就是异步代码。

　　之后，我们需要对代码进行一些修改，修改的方法有两种：

　　原有的示例代码：

    style="display:inline-block;width:300px;height:250px"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000">

　　方法1、智能调整尺寸

　　将中间一行ins代码里的style="display:inline-block;width:300px;height:250px"替换为style="display:block"，并在后面增加data-ad-format="auto"这个属性。

　　修改后的代码变为：

    style="display:block"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000"

    data-ad-format="auto">

　　方法2、高级调整尺寸

　　在整段代码前增加

    style="display:inline-block"

    data-ad-client="ca-pub-00000"

    data-ad-slot="00000">

　　上面两种方法都可以，建议用方法1，简单易用。

　　经过这样的修改，原有的Google AdSense广告单元即可实现自适应网页设计。

　　有些用户可能会疑虑，这种方法修改了Google Adsense的广告代码是否符合Google的政策，根据Google AdSense的官方网页介绍，如上的自适应设计的代码修改是可以接受的修改，因此与网站相适宜的广告修改并不违反Google AdSense的政策。

　　经过这样的修改，最终网站在手机上的展示形式如下图所示，AdSense广告内容也可以正常在手机上展示了。

关于 设计自适应网页方法

自适应网页基础视频：  优酷链接

文章来源月光博客，本站略有改动，本站链接http://www.wusiwei.com