媒体查询智能手机头像 - CSS

媒体查询是CSS样式表中的一种技术，它可以根据设备的不同特性（如屏幕宽度、高度、方向等）动态地改变应用的样式。

在智能手机上，我们可能需要使用不同尺寸的头像图片以适应不同的屏幕大小。通过媒体查询，我们可以根据设备的屏幕宽度来选择合适的头像图片。

以下是一个示例代码片段：

/* 定义两种不同尺寸的头像 */
.avatar-small {
  background-image: url('avatar-small.jpg');
}
.avatar-large {
  background-image: url('avatar-large.jpg');
}

/* 媒体查询，根据设备屏幕宽度选择合适的头像 */
@media only screen and (max-width: 640px) {
  .avatar-small {
    background-image: url('avatar-small.jpg');
  }
  .avatar-large {
    display: none;
  }
}

@media only screen and (min-width: 641px) {
  .avatar-small {
    display: none;
  }
  .avatar-large {
    background-image: url('avatar-large.jpg');
  }
}

上述代码定义了两种不同尺寸的头像（小头像和大头像），并通过媒体查询根据设备屏幕宽度选择合适的头像。当设备屏幕宽度小于等于640px时，使用小头像；当设备屏幕宽度大于640px时，使用大头像。

需要注意的是，在选择不同尺寸的图片时，应该尽可能地减小图片大小，以加快页面加载速度。