在尝试简要回答之前，我将对您的步骤进行一些评论。

当我在 Photoshop 中设计网站时

设计与“制作图片”不同。设计是一个你知道这个过程是什么的过程。制作“模型”只是设计过程的一部分。

我通常使用以下设置，
宽度 = 2560，以便在大屏幕上轻松查看；但是我将所有文本保留在 12 列内容网格（2000px）中

您假设像素是正确的单位。这不是，而是一个起点。

分辨率 > 300

PPI 与网页设计无关。但是当您使用 Photoshop 作为起点时，请将您的 ppi 设置为 72 或 96。

基本指南

我不明白这背后的理论。让您的网站扩展到不同分辨率的最佳做法是什么？

我会将“最佳实践”与“基本实践”分开

基本理论是网页设计不是基于位图，而是基于比例。例如：

使用您选择的任何像素大小的图像（想想 jpg 文件）。

• 比例过程不会说：这是 XXpixels 的大照片。

• 它说“这意味着与您的屏幕一样宽”。

这是我关于如何呈现模型的帖子的提示：您如何呈现长单页网站的线框和设计？

如果您使用该代码，图像将被重新采样以适应任何现代屏幕尺寸。

这是第一个基本思想。从那里开始，您开始思考网页在物理设备中的外观。主要是：

• 一个大桌面显示器

• 平板电脑

• 一部手机

但这必须在样式表中更具体地进行编码。

你注意到我还没有提到任何像素大小吗？

视网膜问题

一个特殊的问题是高密度显示器。

如果您认为您可以使用大显示器设计网站，并且可以使用与在小型手机上相同的信息......不。它是否具有与 24 英寸显示器相同的 1920x1080 像素并不重要。

同样，您将其视为电话或大显示器，而不是像素。

“视网膜”是一种特殊情况，您可以提供比普通屏幕更清晰的替代图像。

浏览器正在“声明”手机的正常像素大小，例如 480 像素，但同时向网站“耳语”“嘿，但是把你拥有的高分辨率图像发给我，因为我可以更清晰地显示它们”所以您可以收到 2 倍或 3 倍大的照片。

顺便说一句，您是从这个视网膜显示分辨率开始的，但情况并非总是如此。

一些技巧：

• 尝试使用更标准化的分辨率，例如 1920 像素宽度，但这只是一个起点。

• 使用我在链接中为您提供的代码在不同的显示器上预览您的图像。

• 在一张与平板电脑屏幕大小相同的纸上剪一个洞，在与手机相同大小的其他纸上剪一个洞，然后想象那里的内容。进行必要的调整。

最佳实践

• 考虑比例。<=（基本的做法都在这里）

• 开始探索什么是媒体查询。<=（标准做法在这里）

• 探索框架的使用。<=（这里有一些常见的做法）

• 深入研究 HTML 和 CSS、UX 设计、分辨率等。<=（最佳实践在这里）

像素没有与之关联的标准“大小”。因此，在 Retina 显示器（2880 x 1800 像素）上 2,000 像素宽的图像大约是屏幕宽度的 2/3。但是，在 1080p 屏幕（1920 x 1080 像素）上的相同图像比屏幕尺寸更宽。