1

我刚开始使用Tailwind CSS。我正在尝试使用flexbox制作一些卡片布局（每个卡片上都有 VG 图标和文本）。当我调整屏幕大小时，它确实会很好地缩小，直到它碰到sm 屏幕。然后只能看到大约60%的卡片高度。

我不确定是否应该将卡片的内容（例如图标和文本）缩小到移动设备，还是应该自动缩小？

这是我的代码：

<main class="h-screen-90 flex flex-col items-center h-64">
            <div>
                <h1 class="text-center text-4xl lg:text-5xl text-white font-normal">no-more spending hours
                    <br> on desk research or
                    <br>Powerpoint visuals</h1>
                <hr class="w-48 border-t-4 border-red-light">
                <h3 class="text-center text-2xl text-white font-medium">Do what you do. Best</h3>
            </div>
            <div class="inline-flex flex-col md:flex-row mt-auto justify-center">
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-8 max-w-sm rounded overflow-hidden shadow-lg bg-purple-darker">
                    <i class="fas fa-chalkboard text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-white font-bold text-xl">BUSINESS PRESENTATIONS</div>
                    </div>
                </div>
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-14 max-w-sm rounded overflow-hidden shadow-lg bg-teal">
                    <i class="fas fa-search text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-center text-white font-bold text-xl">BUSINESS RESEARCH
                            <br>SERVICES</div>
                    </div>
                </div>
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-7 max-w-sm rounded overflow-hidden shadow-lg bg-red-light ">
                    <i class="fas fa-brush text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-center text-white font-bold text-xl">UNLIMITED OFF-THE-RACK
                            <br>DESIGNER SLIDES</div>
                    </div>
                </div>
            </div>
        </main>
4

0 回答 0