前端适配方案

天天向上的鹿茸2026-02-19 14:43

前端适配了解

设备像素比

设备像素比 = 物理像素 / css逻辑像素

Dpr 是 1 时，代表用一个物理像素渲染一个css像素。

Dpr 是 2 时，代表用四个物理像素渲染一个css像素，水平和垂直方向各用两个物理像素渲染一个逻辑像素。

因此同等分辨率的情况下，dpr更高显示效果越细腻。

分辨率

分辨率 = 水平物理像素 * 垂直物理像素

css逻辑分辨率 = 物理分辨率 / 设备像素比

同等分辨率的情况，设备像素比越高，css逻辑分辨率越低，相同的css像素占据更多物理空间，视觉效果偏大。

成本低就是用meta标签，当然也不是所有场景都适用。

移动端适配方案vw配合rem

先将页面整屏切割成10份，多少份都可以，以10份为例

理念：元素大小是相对屏幕宽度的，元素占了屏幕多少份。

代码方案：根元素设置fontSize，用postcss-pxtorem进行转换

优点：开发影响小，适用于现代浏览器，且不受dpr影响。

缺点：产品如果不想要等比缩放，那么该方案不适用。

方案衍生

根元素计算fontSize配合插件转rem，但计算需考虑dpr影响，适用于需兼容低版本浏览器。
方案根本其实就是将元素计算成屏幕占比，那么也可以直接配合插件直接转vw实现适配方案。

百分比适配方案

每个元素依据包含块的尺寸进行百分比样式设置。

成本比较高，需要对不同css属性百分比属性值熟悉。

scale缩放

使用页面需整体缩放且保持一定宽高比，比如视频和图片。

js 复制代码

  const objectFitContainerStyle = useMemo(() => {
    const { width, height } = containerSize;
    return {
      transform: `scale(${width / height > 16 / 9 ? height / 1080 : width / 1920})`,
    };
  }, [containerSize]);

媒体查询

用媒体查询适配不同分辨率。

但解决不了dpr的问题，同等物理分辨率但dpr不同，还是会有影响。