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