关于页面适配的一些方案

一涯2023-11-29 19:12

早期的页面使用了左右布局。左侧宽度固定，右侧宽度自适应。未使用vm、em、百分比等进行屏幕适配。所有的尺寸（宽度、高度、边框宽度、字体大小等）全部使用的px进行开发。导致只有常用的显示屏尺寸显示较为正常，但是小屏幕显示不正常。

媒体查询屏幕适配

正常显示屏的分辨率是1920 * 1080【假如缩放比例为100%】。在此尺寸下显示正常的布局和展示，如果修改分辨率为1360 * 768。则正常显示的字体等有一种放大的效果。

如果想要同1920的显示屏同样的显示效果，则需要在index.html中设置：

js 复制代码

    @media(max-width: 1440px) {
      html {
        zoom: 90%;
      }
    }

但是有一个弊端，字体会变模糊。

很多小屏幕推荐的缩放比例是150%。

此时根据dpr进行适配

js 复制代码

    @media (-webkit-min-device-pixel-ratio: 1.5) {
      html {
        zoom: 0.67
      }
    }

注意，在此设置下，如果系统中有根据pageX， pageY进行定位时，需要额外处理。

js 复制代码

        if (window.devicePixelRatio == 1.5) {
          x = x/0.67;
          y = y/0.67;
        }