广告自适应代码

对于广告自适应，通常需要考虑以下几个方面：

1. 媒体查询
媒体查询是一种CSS3功能，它会根据设备屏幕的宽度和高度来判断并应用不同的CSS样式。通过设置不同的媒体查询，可以让广告在不同的屏幕尺寸下自适应。

2. 响应式图片
在不同的屏幕尺寸下，应该使用不同尺寸的图片来保证图片的显示效果。可以使用srcset和sizes属性指定不同尺寸的图片，并且让浏览器根据屏幕尺寸来选择合适的图片。

3. 自适应字体
在不同的屏幕尺寸下，字体大小也应该相应地调整。可以使用viewport单位和媒体查询来实现字体大小的自适应。

4. 布局方式的调整
在不同的屏幕尺寸下，广告的布局方式可能需要调整。可以使用flexbox或者grid等CSS布局方式来实现自适应布局。

综上所述，可以通过结合媒体查询、响应式图片、自适应字体和布局方式的调整来实现广告的自适应。具体代码实现可以参考以下示例：

<style>
  /* 定义不同屏幕尺寸下的样式 */
  @media (max-width: 768px) {
    .ad {
      width: 100%;
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .ad {
      width: 50%;
    }
  }
  @media (min-width: 1025px) {
    .ad {
      width: 30%;
    }
  }
  /* 定义自适应图片 */
  img {
    max-width: 100%;
    height: auto;
  }
  /* 定义自适应字体 */
  body {
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (768 - 320)));
  }
  /* 定义自适应布局 */
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ad {
    margin-bottom: 20px;
  }
</style>

<div class="container">
  <div class="ad">
    <img srcset="ad-320.jpg 320w, ad-768.jpg 768w, ad-1024.jpg 1024w" sizes="(max-width: 320px) 100vw, (max-width: 768px) 50vw, 30vw">
    <p>广告1</p>
  </div>
  <div class="ad">
    <img srcset="ad-320.jpg 320w, ad-768.jpg 768w, ad-1024.jpg 1024w" sizes="(max-width: 320px) 100vw, (max-width: 768px) 50vw, 30vw">
    <p>广告2</p>
  </div>
  <div class="ad">
    <img srcset="ad-320.jpg 320w, ad-768.jpg 768w, ad-1024.jpg 1024w" sizes="(max-width: 320px) 100vw, (max-width: 768px) 50vw, 30vw">
    <p>广告3</p>
  </div>
</div>

在上面的示例中，首先通过媒体查询定义了不同屏幕尺寸下的广告样式。然后通过使用srcset和sizes属性定义了自适应图片，在不同屏幕尺寸下显示不同尺寸的图片。接着通过设置自适应字体实现了字体大小的自适应。最后使用flexbox布局实现了自适应布局。