如何使我的 Flex-Grow 布局适合移动设备

Question

我写了这个块https://www.codeply.com/p/6jbL7Wl3K2，它非常适合我的目的。固定高度的顶部栏和固定高度的底部栏，中间部分（左侧和右侧）填充剩余空间。

但是，我正在努力使其适合移动/小屏幕。我现在想让原来的左右垂直，高度固定为400px。我尝试使用各种媒体查询，但都有问题。

<div class="min-h-screen flex flex-col">
<div class='bg-blue-700 px-8 flex items-center justify-between py-4 text-white'> Top </div>
<div class='relative flex flex-grow'>
    <nav class='bg-white w-1/2'> Left </nav>
    <main class='bg-gray-100 flex-1'> Right </main>
</div>
<div class='h-20 bg-red-200'> </div>

https://www.codeply.com/p/6jbL7Wl3K2

Answer 1

其中

md

是较大视口和较小视口视图之间的示例断点：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="min-h-screen flex flex-col">
<div class='bg-blue-700 px-8 flex items-center justify-between py-4 text-white'> Top </div>
<div class='relative md:flex flex-grow'>
    <nav class='bg-white md:w-1/2 max-md:h-[400px]'> Left </nav>
    <main class='bg-gray-100 flex-1 max-md:h-[400px]'> Right </main>
</div>
<div class='h-20 bg-red-200'> </div>

• 水平布局仅限于

  md

  并通过

  md:flex

  类实现更大。
• 我们通过

  400px

  设置固定的

  max-md:h-[400px]

  高度。

  max-md:

  将 CSS 规则应用限制为最多

  md

  。