我的网页有用于移动应用程序和桌面应用程序的 Figma 设计。我不知道如何在我的代码上应用移动版本和桌面版本,因此当我在手机中打开应用程序时,只会显示移动版本,桌面版本也是如此。
我应该使用
@media
查询吗?或者还有另一种选择可以做到这一点?假设移动设备屏幕宽度小于 390 像素,桌面设备屏幕宽度大于 390 像素。我尝试使用 @media
,但当我在计算机屏幕上时,两个屏幕都会出现。
如果您使用的是 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 |
---|---|---|
|
640像素 |
|
|
768px |
|
|
1024px |
|
|
1280像素 |
|
|
1536 像素 |
|
这适用于框架中的每个实用程序类,这意味着您可以在给定断点处更改任何内容 - 甚至是字母间距或光标样式之类的内容。