1

我正在用 figma 设计一个登陆页面，它看起来不错，但我的图像特别是我的标志有问题。所以 figma 为我的 logo 提供了一个特定的宽度和高度，当我在我的代码上写下这些规范时，logo 看起来更小。所以这里有2个问题：

  1. 当我从 figma 导出我的 logo 时，我应该以 1x、2x 还是 3x 进行导出？（在正规网站上工作） 2.figma是用pix还是point？

任何帮助将不胜感激。

谢谢

4

2 回答 2

0

理想情况下，您希望使用 SVG，因此您可以使用矢量图形并导出为 SVG。这将无限缩放并且尺寸非常轻。

但是，如果您没有矢量图形，而是位图，那么您需要在使用透明度时导出为 PNG，或者在没有透明度时导出为 JPEG。此外，您还需要将所有位图图像（PNG、JPEG）导出为 1x、2x 和 3x。

在您的代码中不要使用<img width="300" srcset="...">，因为您让浏览器调整图像大小，并且您基本上使用了比需要更大的图像。相反，您应该在导出图像时保留它们而不设置宽度/高度，即：<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x">.

需要 2x 和 3x 是因为如果操作系统的缩放比例超过 100%，例如我的笔记本电脑是 125%，人们会看到你的 2x 图像并且它们看起来很清晰。

附带说明一下，我建议尝试 Desech Studio，因为它会为您导入 Figma，然后您可以导出到 React、Angular、Vue 或简单的 HTML/CSS

于 2021-05-14T14:31:28.377 回答
0

Figma 使用像素。
1x 将渲染原始宽度和高度，例如 100 x 100
2x 将乘以原始大小 x2，您将得到 200 x 200
3x 将乘以原始大小 x2，您将得到 300 x 300

所以那些乘法值不应该是这种情况。

为了确定您的问题，我建议您检查文件信息并查看您在那里看到的宽度和高度值，如果它们与您的设计中的值匹配，那么渲染一切都很好，问题可能是代码。

于 2020-10-31T09:44:46.607 回答