第 7 卷

✅ 面试总结（必背3个核心方案）

1. ✅ transform: scale()：首选，兼容性最好，无副作用，支持所有场景（水平/垂直/边框）
2. ✅ box-shadow：极简，代码一行，适合简单线条，移动端/PC端通用
3. ✅ linear-gradient：精准无缩放，适合复杂渐变/透明线条场景
4. 什么是1px问题,以及如何在前端开发中解决它?

✅ 一、什么是移动端1px问题（面试必背定义+根源）

• 核心定义

1px问题是移动端高清屏（DPR≥2）特有的兼容性问题：前端开发中设置的 1px 是逻辑像素（CSS像素），但在DPR=2/3的高清屏上，1个逻辑像素需要4/9个物理像素来显示，浏览器会将1px逻辑像素的

边框拉伸为2/3px物理像素，导致视觉上的线条比预期的1px更粗（看起来像2px），边框变模糊、不精致，破坏页面设计感，这就是移动端经典的「1px问题」。

• 问题根源（3个核心）

1. ✅ 逻辑像素 vs 物理像素：DPR=2时， 1px CSS逻辑像素 = 2px 物理像素，浏览器强制用2px

物理像素渲染1px逻辑像素，线条变粗

1. ✅ 浏览器渲染机制：高清屏中，浏览器对1px逻辑像素的边框采用插值算法渲染，导致边框模糊、

粗细不均

1. ✅ 设备像素比差异：移动端设备DPR覆盖2/3（主流），无统一标准，加剧了1px问题的兼容性差

异

• 直观举例

• 普通屏（DPR=1）：1px CSS → 1px 物理 → 显示正常1px线条

• 高清屏（DPR=2）：1px CSS → 2px 物理 → 显示粗线条（视觉2px）

• 超高清屏（DPR=3）：1px CSS → 3px 物理 → 显示更粗线条（视觉3px）

✅ 二、1px问题的核心解决方案（按推荐优先级+实战使用率排序，面试优先讲前

4种）

（DPR=2）/ scale(1/3)（DPR=3）将边框缩放至对应比例，视觉上还原真实1px效果，支持单边框/全边框/圆角边框，兼容所有移动端浏览器+Chrome/Firefox，是目前最主流的解决方案。

• 方案1-1：单边框（如下边框，最常用）

Code block

1/* 底部1px真实线条（DPR=2） */ 2.border-bottom-1px {

3position: relative;

4border: none; /* 隐藏默认边框 */ 5}

6.border-bottom-1px::after { 7content: "";

8position: absolute;

9bottom: 0;

10left: 0;

11width: 100%;

12height: 1px; /* 基础1px线条 */

• 方案1-2：全边框（带圆角，实战高频，如卡片/按钮）

Code block

20box-sizing: border-box;

21pointer-events: none; /* 避免遮罩层拦截点击事件 */ 22}

• 方案1-3：适配DPR=2/3（自动判断，极致兼容）

Code block

1/* 根据DPR自动缩放，适配所有高清屏 */ 2.border-1px {

3position: relative;

4border: none;

5} 6.border-1px::after {

7content: "";

8position: absolute;

9top: 0;

10left: 0;

11width: 100%;

12height: 100%;

13border: 1px solid #e5e5e5;

14box-sizing: border-box;

15} 16/* DPR=2设备 */