Photoshop中的像素大小与HTML / CSS中的像素不同？答案

【问题标题】：pixel size in photoshop different than pixels in HTML / CSS?Photoshop中的像素大小与HTML / CSS中的像素不同？
【发布时间】：2014-05-18 04:53:11
【问题描述】：

我为想要创建的应用程序制作了用户界面。 Photoshop 图像的背景宽度为 640 像素，我使用 24 pt 字体输入了应用程序名称。应用名称约占背景宽度的 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 版本与 photoshop 版本相比看起来要小得多？

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

【问题讨论】：

【解决方案1】：

检查您的计算机的显示设置是否过高，这会影响浏览器中的显示大小。

转到计算机显示设置 > 比例和布局 - 将其更改为 100% 或推荐

【讨论】：

【解决方案2】：

在这里找到答案：

在 Photoshop 中，点击

Image -> Image Size

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

【讨论】：

【解决方案3】：

也许是因为字母之间的间距？您可以尝试使用样式更改它：

letter-spacing: Xpx;

【讨论】：