顺风的响应式布局
Posted
技术标签:
【中文标题】顺风的响应式布局【英文标题】:Responsive layout with tailwind 【发布时间】:2020-01-30 06:08:42 【问题描述】:我正在使用 Tailwind 开发响应式布局。在大屏幕上,我有一个固定的标题和一个固定的侧边栏。在较小的分辨率上,侧边栏被隐藏,标题不再固定。内容将始终占据屏幕的最小部分。
感觉不太好的线条是左右手动填充,因为是固定的性质。有没有更好的解决方案?我不是特别喜欢它,因为如果我删除侧边栏,填充不会自动调整。
https://codepen.io/tingaloo/pen/qBWzVqP
<div class="App flex min-h-screen">
<div class="hidden lg:flex h-screen bg-green-300 fixed w-40">sidebar</div>
<div class="flex bg-gray-300 lg:pl-40 w-full flex-wrap">
<div class="flex h-20 w-full lg:pr-40 lg:fixed bg-red-300 justify-between">
<div class="">Header left</div>
<div class="">Header right</div>
</div>
<div class="bg-blue-400 pt-20 w-full">
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
</div>
</div>
</div>
【问题讨论】:
【参考方案1】:利用粘性位置而不是固定位置,这样它仍然会占用空间。
为此,请将fixed
更改为sticky top-0
,然后您就可以摆脱lg:pl-40
和lg:pr-40
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
<div class="App flex min-h-screen">
<div class="hidden lg:flex h-screen bg-green-300 sticky top-0 w-40">sidebar</div>
<div class="flex bg-gray-300 w-full flex-wrap">
<div class="flex h-20 w-full lg:fixed bg-red-300 justify-between">
<div class="">Header left</div>
<div class="">Header right</div>
</div>
<div class="bg-blue-400 pt-20 w-full">
<div class="h-20">First Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Content</div>
<div class="h-20">Last Content</div>
</div>
</div>
</div>
【讨论】:
以上是关于顺风的响应式布局的主要内容,如果未能解决你的问题,请参考以下文章