如何用CSS将表格替换为文本？含移动端媒体查询场景

嘿，这个需求其实很好解决，核心就是靠CSS的display属性配合媒体查询，控制表格和菜单文本的显示/隐藏状态就行。我给你一步步说清楚：

第一步：调整HTML结构 #

首先你需要在页面里同时保留菜单表格和菜单文本两个元素，分别给它们加类名方便CSS选择：

<!-- 菜单表格（大屏显示） -->
<table class="menu-table">
  <!-- 你的表格内容 -->
  <tr>
    <td>菜品A</td>
    <td>¥20</td>
  </tr>
  <!-- 更多表格行... -->
</table>

<!-- 菜单文本（移动端显示） -->
<div class="menu-text">
  <p>菜品A - ¥20</p>
  <p>菜品B - ¥30</p>
  <!-- 更多菜品文本... -->
</div>

第二步：设置默认（大屏）样式 #

在全局CSS里，默认让移动端的菜单文本隐藏，表格正常显示：

/* 全局默认：隐藏移动端菜单文本 */
.menu-text {
  display: none;
}

/* 全局默认：显示菜单表格 */
.menu-table {
  display: table;
  /* 你的表格原有样式 */
}

第三步：在移动端媒体查询中切换显示状态 #

你已经有针对中等屏幕的媒体查询了，现在需要新增一个**针对小屏幕（移动端）**的媒体查询，在里面把表格隐藏，文本显示出来：

/* 移动端：屏幕宽度小于37.5em时生效 */
@media screen and (max-width: 37.4em) {
  /* 隐藏菜单表格 */
  .menu-table {
    display: none;
  }

  /* 显示菜单文本 */
  .menu-text {
    display: block;
    /* 可以给文本加一些移动端适配样式 */
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 1em;
  }
}

额外优化建议 #

如果你的中等屏幕媒体查询（37.5em-64em）也需要调整菜单的显示，同样可以在那个查询块里添加对应的样式，比如让表格宽度100%，或者调整文本（如果需要的话）。

举个例子，在你现有的中等屏幕查询里可以补充：

@media screen and (min-width: 37.5em) and (max-width: 64em){ 
  header{ padding-top: 1em; } 
  main{ padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 1em; padding-right: 1em; font-size: 90%; } 
  h1{ font-size: 1.5em; }
  /* 中等屏幕下表格的适配样式 */
  .menu-table {
    width: 100%;
    border-collapse: collapse;
  }
}

这样就能完美实现不同屏幕尺寸下，菜单在表格和文本之间切换啦！

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