html - photoshop 中的像素大小与 HTML/CSS 中的像素大小不同？

Question

我用 Photoshop 为我想创建的应用程序制作了一个用户界面。 Photoshop 图像的背景宽度为 640px，我使用 24pt 字体输入应用程序名称。应用名称约占背景宽度的 1/3。

然后我创建了一个 html 页面并做了

<div id=header'>
    <div id='logo'>
        <h1>appName</h1>
    </div>
</div>

这是我的 CSS:

#header {
    width:  640px;
    background-color: red;
}

h1 {
    font-size: 24pt;
}

但是当我这样做时，应用名称只占 640 像素的 1/8。即使我使用完全相同的像素和字体，为什么 HTML/CSS 版本看起来比 photshop 版本小得多？

注意:我使用的是 pt 而不是 px。

Answer 1

在这里找到答案:

https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web

在 photoshop 中，单击

Image -> Image Size

并确保 DPI/分辨率设置为 72。