响应式设计

响应式设计是指一套代码同时适配手机、平板、PC 等多种设备，核心在于媒体查询和弹性布局。

1. 媒体查询 (Media Queries)

通过 @media 规则，根据屏幕宽度应用不同的样式。

/* 默认样式 (Mobile First) */
.container {
  width: 100%;
}

/* 平板 (>= 768px) */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* PC (>= 1024px) */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

2. 布局单位

相对单位

  • %: 相对于父元素的百分比（如宽度一半）。
  • em: 相对于当前元素的字体大小 (font-size)。但如果在 font-size 属性上使用，则相对于父元素的字体大小。
  • rem: 相对于根元素 (<html>) 的字体大小。

视口单位 (Viewport Units)

  • vw: 视口宽度的 1% (100vw = 满屏宽)。
  • vh: 视口高度的 1% (100vh = 满屏高)。
  • vmin / vmax: 取 vw 和 vh 中较小/较大的那个。

3. 移动端适配方案

方案一：rem 适配 (旧主流)

  • 原理: 动态设置 <html> 的 font-size。例如设置 html { font-size: deviceWidth / 10 }，那么 1rem 就等于屏幕宽度的 1/10。
  • 工具: amfe-flexible (JS 动态计算) + postcss-pxtorem (编译时单位转换)。

方案二：vw 适配 (新主流)

  • 原理: 直接使用 vw 单位。无需 JS，浏览器原生支持。
  • 工具: postcss-px-to-viewport。

1px 边框问题

在高分辨率屏幕 (Retina) 下，CSS 的 1px 会对应物理像素的 2px 或 3px，导致边框看起来变粗。

解决方案: 使用伪元素 + transform: scale(0.5)。

.border-1px {
  position: relative;
}
.border-1px::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  pointer-events: none; /* 防止遮挡点击 */
}

4. 常见面试题

1. rem 和 em 的区别？

  • em: 相对单位，参考当前元素（font-size 属性参考父元素），容易发生多层嵌套导致的计算混乱。
  • rem: 相对单位，始终参考根元素 (html)，计算稳定，适合做响应式基准。

2. 如何解决移动端 1px 变粗的问题？

  • 使用 transform: scale(0.5) 缩放伪元素边框。
  • 使用 SVG 或 border-image。
  • 新的 CSS 属性 (未来): border-width: 0.5px (部分浏览器已支持)。

3. 响应式图片怎么做？

  • CSS: max-width: 100%; height: auto;
  • HTML: 使用 <picture> 标签或 srcset 属性，根据倍图加载不同资源。