使用 Tailwind CSS 的响应式布局

Question

我的网页有用于移动应用程序和桌面应用程序的 Figma 设计。我不知道如何在我的代码上应用移动版本和桌面版本，因此当我在手机中打开应用程序时，只会显示移动版本，桌面版本也是如此。

我应该使用

@media

查询吗？或者还有另一种选择可以做到这一点？假设移动设备屏幕宽度小于 390 像素，桌面设备屏幕宽度大于 390 像素。我尝试使用

@media

，但当我在计算机屏幕上时，两个屏幕都会出现。

Answer 1

如果您使用的是 TailwindCSS，它们具有用于指定移动和桌面屏幕尺寸的类前缀。 访问文档了解更多信息。

来自文档：

首先，确保您已将视口元标记添加到文档中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后，如果要添加一个实用程序，但只在某个断点处生效，您只需在该实用程序前面加上断点名称前缀，后跟

:

字符即可：

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

受常见设备分辨率的启发，默认有五个断点：

断点前缀	最小宽度	CSS
sm	640像素	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280像素	@media (min-width: 1280px) { ... }
2xl	1536 像素	@media (min-width: 1536px) { ... }

这适用于框架中的每个实用程序类，这意味着您可以在给定断点处更改任何内容 - 甚至是字母间距或光标样式之类的内容。