如何根据视口宽度使用 Tailwind CSS 更改部分类的布局？

Posted 2023-03-07

【中文标题】如何根据视口宽度使用 Tailwind CSS 更改部分类的布局？

【英文标题】：How to change the layout of a section class with Tailwind CSS based on viewport width?

【发布时间】：2021-11-02 02:41:47

【问题描述】：

我正在为以下想法的执行而苦苦挣扎，很高兴得到支持：

我创建了这篇文章预览部分，它在小屏幕（移动）设备上看起来很棒：

<section class="w-full md:w-2/3 flex flex-col items-center px-3">
    <article class="w-full flex flex-col shadow my-4">
    <div class="bg-white flex flex-col justify-start p-6">
            <div class="max-w"><a
                    href="#>"
                    class="text-blue-700 hover:text-blue-500 text-sm font-bold uppercase pb-4">#Tag&nbsp;#Tagg&nbsp;#TAGGG</a>
            </div>
            <a href="#"
                class="text-3xl font-bold hover:text-gray-700 pb-4">Article title</a>
            <p href="#" class="text-sm pb-3">By <a href="#" class="font-semibold hover:text-gray-800">author</a>, published at 12.03.2021
            </p>
        <div class="aspect-w-16 aspect-h-9">
        <a href="#">
            <img src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIzfHxlYXJ0aHxlbnwwfHx8fDE2Mjc1NTc2ODI&ixlib=rb-1.2.1&q=80&w=2000">
        </a>
        </div>
            <a href="#"
                class="pb-6 prose max-w-none">Here comes a teaser or an excerpt of the article text...</a>
            <div><a href="#"
                class="uppercase hover:font-bold text-gray-700 hover:text-black"><mark>Read more…&nbsp;<i
                    class="fas icon-arrow-right"></i></mark></a></div>
        </div>
    </article>
</section>

现在我想将更大屏幕 (md: = @media (min-width: 768px) &) 上的布局更改为这个：

遗憾的是，我的知识太有限，无法实现我的想法。需要添加/更改什么来实现它？

Link to the Playground

【参考方案1】：

实现这一点的最简单方法是拥有 2 张图像并根据屏幕大小隐藏其中 1 张。

因此，在大屏幕上，您可以使用这些类隐藏左对齐图像：

hidden md:block

md:block 覆盖 hidden。

而内嵌图像会隐藏在大屏幕上：

md:hidden

I made you a playground (also cleaned up unneccesary classes and tags a bit)

我将图像与grid 和grid-cols 左对齐。肯定还有其他方法可以做到这一点。