时间戳

首页 > 解决方案 > 如何使卡片全宽并且即使在移动视图中也显示图像（使用tailwindcss）

html - 如何使卡片全宽并且即使在移动视图中也显示图像（使用tailwindcss）

问题描述

所以我一直在尝试使用tailwind css卡片在页面上显示帖子，在移动视图中我仍然希望卡片是全宽的，并在桌面视图中发布图像显示在旁边，代码示例如下所示：

<div class="max-w-md bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-6">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-20" src="...">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
 <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
</div>

标签： htmlcsstailwind-css

解决方案

首先你需要使用媒体查询来修改你卡片的顺风默认设置。创建一个css文件并将其连接到您的html，或者如果您已经拥有它，您需要考虑一些关于屏幕尺寸的事情。

  1. 智能手机/平板电脑的宽度范围是多少？可能 768px 是平板电脑的共同最大尺寸？
  2. 在这种情况下，它的卡类名称是什么，“max-w-md”，但我更喜欢您使用 id 来选择它。

将此代码写入您的 css 文件

@media(max-width: 768px) {
     .max-w-md {
         max-width: 100vw !important;
     }
}

让我们逐行了解这里发生了什么。

  1. 我们正在设置 768px 范围内的设备的最大宽度
  2. 我们正在选择我们的卡片类 .max-w-md （我们正在尝试将具有此类“max-w-md”最大宽度的tailwind css的设置覆盖为100vw（100视口）意味着它不会关心什么父宽度或高度是根据视口大小（您看到网站的部分，整个文档）根据它设置宽度，当屏幕宽度为 768px 时，您的卡片将是页面的 100%你看到html。
  3. 您可以在浏览器中转到开发人员工具并转到元素选项卡，然后选择您的主卡，查找此 div此 div 是您要选择的类以查看其 css ，并在右侧或底部的样式选项卡上在过滤器上输入宽度或最大宽度，它将给出此代码 这是 max-w-md 类的顺风 css 默认设置

推荐阅读