问：大家好，我需要为一个项目制作HTML5自适应横幅。我看了Green Sock和Lynda的一些动画教程，但在响应式横幅中找不到任何内容。如果您查看css-trick中的广告，那就是我想要我的最终产品的样子。
有人对这个有了解吗 ？
答：响应式网页设计是互联网的一项重大飞跃。
我们不再被链接到古老的“印刷页面”隐喻，在隐喻中内容是静态的并被分页为常规大小的块。
现在，互联网可以生活和呼吸，并可以适应从手机屏幕到大型电影院显示的任何可用空间。
这就是互联网的本意。
但是有一个小问题。
网站通常具有横幅广告，而传统的横幅广告不灵活。Flash横幅和动画gif横幅都具有固定的像素尺寸，因此与当今的自适应布局不兼容。
我们需要一种新的方式来做横幅广告。
我们需要自适应横幅广告...
横幅广告的新格式
使横幅广告像我们的HTML5布局一样具有响应性的唯一方法是也使它们也使用HTML5。起初这听起来像是个疯狂的主意，但我向您保证不是。实际上，使用HTML制作广告有很多好处。
HTML广告是完全可访问的，并且语义标记使它们与屏幕阅读器兼容。
文字，图像，视频，Javascript和表格都可以在广告中使用，就像在任何网页上一样。
如果需要，标语可以使用动态服务器端脚本和数据库。
就像任何网页一样，可以在广告部署后对其进行更改。
HTML广告的文件大小可能非常小。
标语广告投放服务与虚拟主机基本相同。
没有新技术可供Web开发人员学习-与普通Web开发相同。
当然，通过CSS3媒体查询，HTML5广告可以适应任何尺寸-这正是我们需要响应式横幅广告的条件！
那么，我们如何制作自适应广告？
首先，将广告创建为自适应HTML5页面。我们添加广告中所需的所有文本，图像和指向页面的链接，并使用CSS设置其样式。
其次，可以使用iframe在任何网站上展示广告。
唯一的技巧是通过CSS3媒体查询使iframe尺寸动态化，我将在稍后介绍...但是基本上，就是这样！
请注意，当您更改浏览器窗口的大小时，第二个横幅广告会如何响应……非常整洁！:)
横幅尺寸的新约定
响应式布局要求页面元素具有可变宽度，因此横幅现在也必须遵循此约定。
横幅的高度在自适应设计中并不重要，因此我们可以使用自己喜欢的任何高度。但是选择一个高度并不意味着我们的广告就停留在那个高度，我们可以为每个广告定义多个高度！
为了保持向后兼容性，自适应广告应使用与传统横幅尺寸相同的像素高度。
从理论上讲，我们可以创建可响应的横幅广告，该横幅广告可以在任何宽度或高度下工作，但构建或测试不可行。
我建议我们坚持最小宽度为88像素，并具有以下一组标准高度：
31px“微”
微型酒吧（88 x 31）
60px“按钮”
按钮2（120 x 60）
半横幅（234 x 60）
完整横幅（468 x 60）
90px“横幅”
按钮1（120 x 90）
页首横幅（728 x 90）
125px“小矩形”
方形按钮（125 x 125）
250px“中矩形”
垂直横幅（120 x 240 *足够接近！）
方形弹出式窗口（250 x 250）
中矩形广告（300 x 250）
400px“大矩形”
垂直矩形（240 x 400）
600px“摩天大楼”
摩天大楼（120 x 600）
宽幅摩天大广告（240 x 600）
半页广告（300 x 600）
我在上面选择的七个像素高度为我们提供了一个不错的垂直尺寸范围，并且宽度可变，我们涵盖了当今使用的最受欢迎的横幅广告尺寸。当然，与传统横幅一样，您可以根据需要创建自定义尺寸。
关于自适应广告，最好的事情是我们将14种常规横幅的大小减小到了只有7个高度，所有这些都可以通过一个HTML5广告来显示！
不仅如此，我的演示横幅广告整个广告（HTML，CSS和JPG图片）的收入还不到2.5万。这小于单个小横幅的最大文件大小！
使用我的自适应广告检查器尝试这些新的横幅尺寸-您也可以使用它来测试您自己的广告。确保更改浏览器窗口大小以查看它们的调整情况。
使用CSS媒体查询调整iframe的大小
有时，您可能希望广告具有响应高度，为此，您需要通过CSS媒体查询来更改iframe大小。我发现执行此操作的最佳方法是将iframe的宽度和高度设置为100％，并将其放入在CSS中设置了特定尺寸的div中。看起来是这样的：
<div id="ad">
<iframe
src="ad.html"
border="0"
scrolling="no"
allowtransparency="true"
width="100%"
height="100%"
style="border:0;">
</iframe>
</div>
这是CSS：
/* default height */
#ad {
height:60px;
}
@media only screen and (height:90px) {
/* 90 pixels high */
#ad {
height:90px;
}
}
@media only screen and (height:125px) {
/* 125 pixels high */
#ad {
height:125px;
}
}
查看我的自适应横幅广告CSS文件，以查看完整的工作示例。
跟踪印象和点击
关于HTML5广告最好的是，可以像普通网站一样使用Google Analytics（分析）来跟踪它们。
与传统的横幅广告投放系统相比，这实际上为您提供了更多的数据。您不仅可以可靠地跟踪印象，还可以可靠地跟踪引荐来源网址，浏览器，屏幕分辨率，移动设备，受欢迎的国家和城市以及更多其他内容！
通过使用许多免费的URL缩短服务之一来跟踪广告点击，这也是一项艰巨的任务。我个人比较喜欢bit.ly。如果您的广告有多个链接，则可以单独跟踪它们。只需记住在链接上使用target =“ _ top”，这样您的广告就会从iframe中退出，并且该链接会充满整个浏览器窗口。
在META标签中记录横幅大小
可以制作自适应广告来支持任何大小的广告，而不是通过CSS来查找支持的高度，我建议我们将其记录在META标签中。这是一个例子：
<meta
name="displayheight"
content="31, 60, 90, 125, 250, 400, 600" />
这是很好的，因为META标签是计算机可读的。在某些情况下，您的浏览器可能需要知道其他尺寸才能显示广告。
总之
我们需要可变宽度的横幅广告来制作响应式布局，我认为HTML5是最好的方法。
借助CSS3的一些技巧，我们可以制作一个可以调整为适合当今使用的所有常见横幅尺寸的广告。下载我的示例标题文件并尝试一下。
