什么是 PPI
PPI（Pixels Per Inch），每英寸像素数，是显示屏幕上每英寸的像素数目。一般来说，PPI 越高，屏幕越清晰。
如何适应高 PPI 屏幕
随着技术的不断发展，我们越来越多地看到高 PPI 屏幕的出现。为了适应这些屏幕，我们需要做出一些调整，使得网站在不同 PPI 的设备上均能呈现良好的展示效果。
利用 CSS 媒体查询
利用 CSS 媒体查询可以实现在不同设备上展示不同样式，从而适应不同的 PPI 屏幕。
@media only screen and (min-resolution: 192dpi) {
/* 针对高 PPI 屏幕的样式 */
}
@media only screen and (max-resolution: 191dpi) {
/* 针对普通 PPI 屏幕的样式 */
}使用矢量图形
在高 PPI 屏幕上，图片可能会出现模糊不清的情况。为了解决这个问题，我们可以使用矢量图形，例如 SVG（Scalable Vector Graphics），这样可以确保图片在不同 PPI 设备上均能展现良好的效果。
利用 rem 或者 em 进行样式布局
我们可以使用 rem 或者 em 作为样式单位来适应不同的 PPI 屏幕。rem 的值根据根元素的字体大小进行计算，而 em 的值根据其父元素的字体大小进行计算。通过这种方式，可以确保页面元素在不同 PPI 屏幕上的大小比例相同。
使用 viewport meta 标签
在 HTML 的 head 中，我们可以添加 viewport meta 来控制视口的大小和缩放行为，从而适应不同的 PPI 屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
总结
在设计响应式网站时，我们需要考虑到不同的 PPI 屏幕对展示效果的影响。通过使用 CSS 媒体查询、利用矢量图形、使用 rem 或者 em 作为样式单位以及添加 viewport meta 标签，可以有效地适应不同 PPI 屏幕的展示效果，使得网站在不同的设备上呈现更加统一和优秀的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538e19a7d4982a6eb206b78