如何解决从Figma到HTML和CSS
我正在用figma设计登陆页面,看起来不错,但是我的图片特别是带有徽标的图片存在问题。因此,figma为我的徽标提供了特定的宽度和高度,当我在代码中写入这些规范时,徽标看起来会更小。所以这里有两个问题:
- 当我从figma导出徽标时,应该以1倍,2倍或3倍的比例进行处理吗? (在常规网站上工作) 2. figma使用像素或点吗?
任何帮助将不胜感激。
谢谢
解决方法
Figma使用像素。
1x将呈现原始的宽度和高度,例如100 x 100
2倍会将您的原始尺寸乘以2倍,您将得到200 x 200
3倍会将您的原始尺寸乘以2倍,您将得到300 x 300
因此,这些乘数值不应该是这种情况。
为确定您的问题,我建议您检查文件信息,看看在那里看到的宽度和高度值,如果它们与设计中的值匹配,则渲染的一切都很好,问题可能出在代码上。
,理想情况下,您希望使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。