第 5 卷

• 给div设置 width: 375px，表示div的逻辑宽度为375CSS像素

• 无论在手机/平板/PC上， 1px 逻辑像素的视觉大小基本一致

• 3. 像素密度（PPI / DPI）
• 定义：每英寸屏幕包含的物理像素数量，单位 PPI（Pixels Per Inch），也叫DPI（Dots Per

Inch），是衡量屏幕清晰度的核心指标。

• 计算公式：

像素密度(PPI) = 屏幕对角线物理像素数 ÷ 屏幕对角线英寸数

• 特点：

• 像素密度越高，屏幕显示越清晰细腻，无颗粒感

• 像素密度与设备尺寸、物理像素相关：同尺寸屏幕，物理像素越多，PPI越高

• 示例：

• 普通电脑屏幕：72PPI / 96PPI（低密屏）

• 手机高清屏：326PPI+（Retina屏，如iPhone 15：460PPI）

• 4K显示器：210PPI+（高密屏）

✅ 二、三者的核心关联（关键：设备像素比DPR）

• 设备像素比（DPR = Device Pixel Ratio）
• 定义：同一方向上，物理像素与逻辑像素的比值，是连接物理像素和逻辑像素的桥梁。
• 公式： DPR = 物理像素 ÷ 逻辑像素（宽/高方向）
• 核心关系： 1个逻辑像素 = DPR × DPR 个物理像素
• 示例：

• iPhone 15：逻辑像素393×172，物理像素2556×1179 → DPR=6.5（≈3倍，@3x）

• 普通安卓机：逻辑像素375×667，物理像素750×1334 → DPR=2（@2x）

• 电脑屏幕：逻辑像素1920×1080，物理像素1920×1080 → DPR=1（@1x）

• 像素密度与DPR的关系：

像素密度 ↑ → DPR ↑ → 1个逻辑像素对应更多物理像素 → 屏幕更清晰

✅ 三、移动端开发为何需要@2x/@3x图片？（核心问题，面试必讲）

• 举例说明（最易理解）：

• @1x图片：20×20像素（1个图片像素对应1个物理像素）

• DPR=2设备：1个逻辑像素=4个物理像素，显示20×20逻辑像素的图片，需要40×40物理像素

• 用@1x图片显示：浏览器强行把20×20图片放大到40×40，像素点被拉伸，图片模糊

• 用@2x图片显示：直接提供40×40像素的图片，1个图片像素对应1个物理像素，显示清晰无模糊

• @2x/@3x图片的核心作用
• 1. 解决高清屏图片模糊问题，保证图片在不同像素密度设备上清晰显示

• @2x图片：像素尺寸是@1x的2倍（如@1x=20×20，@2x=40×40），适配DPR=2的设备

• @3x图片：像素尺寸是@1x的3倍（如@1x=20×20，@3x=60×60），适配DPR=3的设备

• 2. 平衡显示效果与加载性能

• 若所有设备都用@3x图片：DPR=1/2的设备会压缩图片，虽清晰但图片体积过大，加载慢

• 提供@1x/@2x/@3x三套图片：设备根据自身DPR自动加载对应图片，在清晰和性能之间取最优解

• 3. 适配海量移动端设备

移动端设备品牌/型号众多，DPR覆盖 1/2/3（主流2/3），多套图片可兼容所有设备，保证全机型最佳显示效果。

✅ 四、@2x/@3x图片的实际使用方式（开发实操）

• 方式1：CSS background-image 配合 background-size

Code block

1/* 显示20×20逻辑像素的图标 */ 2.icon {

3width: 20px;

4height: 20px;

• 方式2：img标签 srcset 自动适配（推荐）

5width="20"

6height="20"

7alt="图标"

8>

• 方式3：移动端框架自动适配（UniApp/Taro/Vue）

• UniApp/Taro：直接放入 @2x/@3x 图片到对应目录，框架自动根据设备DPR加载

• 小程序：支持 image 标签的 srcset 属性，或使用官方图片裁剪组件

✅ 面试总结（精简版，直接背）

1. 物理像素=硬件真实像素，逻辑像素=开发用CSS像素，像素密度=每英寸物理像素数，DPR=物理/

逻辑像素比

1. 高清屏DPR≥2，1个逻辑像素需要多个物理像素显示，@1x图片拉伸导致模糊
2. @2x/@3x图片的像素尺寸是@1x的2/3倍，匹配DPR=2/3的物理像素，保证图片清晰，同时平衡性

能

1. 使用CSS,怎样画出一条粗细为0.5px的线?

✅ 问题背景

直接设置 border: 0.5px solid #000 在多数设备/浏览器中无效，原因：

1. 浏览器对像素的最小渲染单位限制：部分浏览器（如Chrome）会将0.5px向上取整为1px
2. 物理像素限制：普通屏幕（DPR=1）的最小物理像素是1px，无法显示0.5px的物理尺寸
3. 兼容性问题：IE/旧版浏览器完全不支持小数像素值

• 核心思路：通过CSS技术手段，实现「视觉上0.5px」的线条效果，以下是5种方案，按推荐优先级

+兼容性排序，面试优先讲前3种。

✅ 方案1：transform: scale() 缩放（✅ 推荐首选，兼容性最好，无副作用）

• 核心原理

先设置1px的基础线条，再通过 transform: scaleY(0.5)（水平线条）/ transform:

scaleX(0.5)（垂直线条）将线条垂直/水平缩放50%，视觉上呈现0.5px效果，支持所有现代浏览