如何使用CSS实现div移动端响应式 无需在代码中使用if语句

所有适配逻辑全部放在CSS层处理，React侧仅需编写固定的DOM结构，不需要写任何JS条件判断语句即可实现效果。

基础React JSX结构（无任何if逻辑） #

function ResponsiveModule() {
  return (
    <div className="responsive-wrapper">
      <div className="card card-1">模块1</div>
      <div className="card card-2">模块2</div>
      <div className="card card-3">模块3</div>
      {/* 可按需求添加更多固定结构模块 */}
    </div>
  )
}

常用适配场景实现 #

1. 多断点布局切换 #

用媒体查询配合grid/flex布局，实现不同屏幕尺寸下的结构变化，无需修改DOM顺序：

.responsive-wrapper {
  display: grid;
  gap: 16px;
  width: 100%;
}

/* 移动端（<768px）：单列布局，调整模块展示顺序 */
@media (max-width: 767px) {
  .responsive-wrapper {
    grid-template-columns: 1fr;
  }
  .card-2 {
    order: -1; /* 无需改DOM，直接把模块2提到最前面展示 */
  }
}

/* 平板（768px~1199px）：双列布局 */
@media (min-width: 768px) and (max-width: 1199px) {
  .responsive-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .card-1 {
    grid-column: 1 / -1; /* 模块1占满整行宽度 */
  }
}

/* PC端（≥1200px）：自定义比例三列布局 */
@media (min-width: 1200px) {
  .responsive-wrapper {
    grid-template-columns: 3fr 1fr 1fr;
  }
}

2. 不同断点元素显隐 #

无需JS判断屏幕尺寸控制渲染，直接用CSS控制展示状态：

/* 仅PC端展示的元素 */
.only-desktop {
  display: none;
}
@media (min-width: 768px) {
  .only-desktop {
    display: block;
  }
}

/* 仅移动端展示的元素 */
.only-mobile {
  display: block;
}
@media (min-width: 768px) {
  .only-mobile {
    display: none;
  }
}

3. 自适应尺寸缩放 #

用原生CSS响应式单位和函数实现尺寸自动适配，无需JS计算：

.responsive-text {
  /* 字体大小最小16px，最大32px，中间区间随视口宽度自动缩放 */
  font-size: clamp(16px, 3vw, 32px);
  /* 内边距同理自适应 */
  padding: clamp(8px, 2vw, 24px);
}

如果是对应特定参考图的布局效果，只需要调整对应媒体查询内的CSS规则即可，全程不需要修改JSX逻辑，也不会出现任何if判断语句。

内容的提问来源于stack exchange，提问作者ss5592