我正在開發一個具有兩種布局（移動和桌面）的網頁。在桌面布局中，我想要一個垂直拆分的頁面，其中主要內容位于右側，頁眉、頁腳和內容影像位于左側（查看下圖）。
在移動設備上，我希望頁面不再拆分的布局看起來不同，組件流從頁眉開始，然后是主要內容，最后是頁腳。不再顯示內容影像（檢查下圖）。
我遇到的問題在于移動布局。我想重新排列顯示的組件而不必使用反應鉤子重新渲染它們，因為創建的組件的結構是這樣的：
Page
├─ Left Pane
│ ├─ Header
│ ├─ Image
│ ├─ Footer
│
│
├─ Right Pane
├─ Main content
所需的移動結構如下所示：
Page
├─ Header
├─ Main Content
├─ Footer
我嘗試根據使用 display/padding/margin 屬性的媒體查詢使用不同的 CSS 樣式并使其有些作業，但是當頁腳的內容太長時，這是一個hacky 解決方案，它將與主要內容和頁面無法正確顯示組件。
有什么方法可以做到這一點而不必觸發 React 重新渲染？或者是否有更好的結構建議可以確保桌面版本中的左右窗格彼此完全隔離并正確顯示移動站點？
uj5u.com熱心網友回復：
沒有一些代碼很難判斷，但是如果您使用 flexbox order，如果您想要純 css 解決方案，您可以在媒體查詢中使用。這里的一些資訊：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property
uj5u.com熱心網友回復：
有一種方法可以做到這一點！您需要使用CSS Grid。下面是使用 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396417.html