屏幕尺寸分辨率兼容性

最新推荐文章于 2025-02-08 12:49:34 发布

原创最新推荐文章于 2025-02-08 12:49:34 发布 · 607 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文探讨了屏幕尺寸和分辨率的兼容性问题，介绍了两种前端解决方案：calc自动缩放和响应式布局（rem），并提供了pxrem转换实例。开发时需调研用户需求，避免返工。特别提到Chrome浏览器的最小分辨率限制。

屏幕尺寸分辨率兼容性

1、信息

1）常规分辨率信息

型号	分辨率
小尺寸笔记本电脑	1280*720
台式电脑	1920*1080
2k	2560*1440
4k	3840*2160

2）视距

视距	理想 PPI	规格
40cm	190	23.8 寸 4K
50cm	160	23.8 寸 4K、27 寸 4K
60cm	125	23.8 寸 2K/4K、27 寸 4K
70cm	110	27 寸 2K/4K
80cm	95	27 寸 2K/4K、32 寸 2K/4K
90cm	84	32 寸 2K/4K

2、前端分辨率解决方案

1）calc自动缩放

优点：

适用于固定比例16:9 （ 1920*1080）
开发简单，成本低

缺点：

不够灵活在不是标准屏情况下会变形

2）响应式布局+rem

优点：

适用于所有分辨率

缺点：

需要考虑较多兼容性问题
代码量大

3、代码

pxrem转换公式以 12px为例

1rem= 12px

@media screen and (min-height: 100px) {
    body,
    html {
        font-size: 6px;
    }
}

@media screen and (min-height: 700px) {
    body,
    html {
        font-size: 8px;
    }
}

@media screen and (min-height: 750px) {
    body,
    html {
        font-size: 8.8px;
    }
}

@media screen and (min-height: 830px) {
    body,
    html {
        font-size: 10px;
    }
}

@media screen and (min-height: 920px) {
    body,
    html {
        font-size: 11px;
    }
}

@media screen and (min-height: 1080px) {
    body,
    html {
        font-size: 12px;
    }
}

@media screen and (min-height: 1200px) {
    body,
    html {
        font-size: 14px;
    }
}

@media screen and (min-height: 1320px) {
    body,
    html {
        font-size: 17px;
    }
}

@media screen and (min-height: 1500px) {
    body,
    html {
        font-size: 18px;
    }
}

@media screen and (min-height: 1800px) {
    body,
    html {
        font-size: 22px;
    }
}

@media screen and (min-height: 2000px) {
    body,
    html {
        font-size: 26px;
    }
}

@media screen and (min-height: 2500px) {
    body,
    html {
        font-size: 30px;
    }
}