面试题：CSS 响应式设计中复杂媒体查询与响应式单位的优化应用

Question

一个电商产品展示页面，有商品图片、标题、价格等元素。要求在不同设备屏幕下展示效果不同：在手机竖屏（小于 600px）时，商品图片宽度为 100%，标题和价格上下排列且字号较小；在手机横屏（600px - 991px）时，图片宽度为 50%，标题和价格在图片右侧且字号适中；在平板及以上设备（大于等于 992px）时，图片宽度为 30%，标题和价格在图片右侧且字号较大。使用 em 作为响应式单位，并优化布局保证加载性能，阐述你的实现思路并写出关键 CSS 代码。

Answer 1

实现思路

1. 使用媒体查询（@media）来检测不同设备的屏幕宽度，针对不同宽度范围设置不同的样式。
2. 使用em作为单位，em是相对单位，相对于父元素的字体大小，这样可以在不同设备上保持相对一致的布局比例，同时提高可访问性。
3. 为了优化加载性能，考虑图片的懒加载（虽然本题未明确要求，但实际项目中是常见优化手段），并且合理使用 CSS 选择器以减少计算量。同时，避免使用过多复杂的布局（如嵌套多层div等），优先使用flexbox或grid等现代布局方式。

关键 CSS 代码

/* 基础样式 */
.product {
  display: flex;
  flex-direction: column;
  font-size: 1em; /* 设置基础字体大小，方便后续以em为单位计算 */
}

.product img {
  max-width: 100%;
  height: auto;
}

.product .title,
.product .price {
  margin: 0;
}

/* 手机竖屏（小于 600px） */
@media (max-width: 599px) {
 .product {
    flex-direction: column;
  }
 .product img {
    width: 100%;
  }
 .product .title,
 .product .price {
    font-size: 0.8em;
    text-align: center;
  }
}

/* 手机横屏（600px - 991px） */
@media (min-width: 600px) and (max-width: 991px) {
 .product {
    flex-direction: row;
  }
 .product img {
    width: 50%;
  }
 .product .title,
 .product .price {
    font-size: 1em;
    margin-left: 1em;
  }
}

/* 平板及以上设备（大于等于 992px） */
@media (min-width: 992px) {
 .product {
    flex-direction: row;
  }
 .product img {
    width: 30%;
  }
 .product .title,
 .product .price {
    font-size: 1.2em;
    margin-left: 1em;
  }
}