匹配photoshop像素大小和css渲染像素大小的技巧

检查了不同的网站，但没有明确的答案。每次我在photoshop中得到一个新设计，我都会尝试将像素大小匹配到css代码中。然后浏览器渲染的大小与我在photoshop文件中看到的完全不同。我总是以72页的分辨率获取所有文件

有没有一个技巧可以使photoshop的像素大小与渲染后的CSS像素大小相同

作为一个直观的例子

同样的排版，谷歌字体排版在这种情况下

两者的值都是18px

Photoshop：

CSS渲染：

---

我不知道，伙计。我完美地将我所有的psd翻译成css，没有问题

---

始终使用72dpi图像，确保在“首选项”>“单位和规则”>“单位”中将“标尺”和“类型”标记为像素

Menendez，以便psd中的像素值与css值匹配？它们看起来不会稍微大一点？图像总是相同的。恐怕我在字体方面帮不了你，因为我从来不使用像素作为大小单位。em和我总是使用chrome的一些不错的应用程序，比如“page ruler”，在视觉上尽可能接近字体大小。顺便说一句，当你创建一个新的psd文档时，你总是可以使用“web”预设。也许这会很有帮助。如果它们是相同的元素，为什么它们有不同的文本？这不是答案，而是有用的chrome插件-帮助你匹配HTML和PSD。据我所知，你的HTML应该几乎是设计的复制品，那么为什么你需要额外的努力来匹配像素？@Pravincahal我有时太完美主义了，也许有一个诀窍可以让精确的值保持不变。但我开始觉得这是不存在的。@DanielRamirez Escudero听起来很棒，所以如果你得到任何有用的答案或方法，也请为其他人发帖：）祝你好运