React 响应式设计重新排序组件

Question

我正在开发一个具有两种布局（移动版和桌面版）的网页。在桌面布局中，我想要一个垂直拆分的页面，其中主要内容位于右侧，页眉、页脚和内容图像位于左侧（查看下图）。

在移动设备上，我希望页面不再拆分的布局看起来有所不同，组件流从页眉开始，然后是主要内容，最后是页脚。内容图片不再显示（查看下图）。

我遇到的问题是移动布局。我想重新排列显示的组件而不必使用反应钩子重新渲染它们，因为创建的组件结构是这样的：

Page
├─ Left Pane
│  ├─ Header
│  ├─ Image
│  ├─ Footer
│
│
├─ Right Pane
   ├─ Main content

所需的移动结构如下所示：

Page
├─ Header
├─ Main Content
├─ Footer

我尝试根据使用 display/padding/margin 属性的媒体查询使用不同的 CSS 样式，并使它有些工作，但当页脚的内容太长时，这是一个 hacky 解决方案，它会与主要内容重叠，页面无法正常显示组件。

有没有什么方法可以做到这一点而不必触发 React 重新渲染？或者我的页面有更好的结构建议，以确保桌面版本中的左右窗格完全相互隔离并正确显示移动站点？

Answer 1

如果没有一些代码很难判断，但是如果您使用的是 flexbox，并且您想要一个纯粹的 css 解决方案，则可以在媒体查询中使用 order。这里有一些信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property

Answer 2

有办法做到这一点！您需要使用 CSS Grid。下面是使用网格的功能预览。请注意，当下方预览的宽度小于 550 像素时，布局会发生变化。您可以更改 @media 查询以适合您的用例。

html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px auto 50px
}

.header {
  background: #CDCD00;
  grid-column: 1;
  grid-row: 1;
}

.footer {
  background: #CDCD00;
  grid-column: 1;
  grid-row: 3;
}

.image {
  background: #372F9F;
  grid-column: 1;
  grid-row: 2;
}

.content {
  background: #DF1829;
  grid-column: 2;
  grid-row: 1 / 4;
}

@media only screen and (max-width: 550px) {
  .image {
    display: none;
  }
  .content {
    grid-column: 1;
    grid-row: 2;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}


/* Fancy unneccessary styles */

body {
  font-family: sans-serif;
}

h1 {
  margin: auto;
  align-items: center;
}

div {
  text-align: center;
  display: flex;
  justify-content: center;
}

<div class="grid">
  <div class="header">
    <h1>Header Placeholder</h1>
  </div>
  <div class="footer">
    <h1>Footer Placeholder</h1>
  </div>
  <div class="image">
    <h1>Image container</h1>
  </div>
  <div class="content">
    <h1>Main content container</h1>
  </div>
</div>

React 响应式设计重新排序组件

React responsive design reorder components

css

frontend

responsive-design

reactjs