关于页面适配的一些方案

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

媒体查询屏幕适配

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

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

    @media(max-width: 1440px) {

      html {
zoom: 90%;

      }

    }

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

根据dpr适配

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

此时根据dpr进行适配

    @media (-webkit-min-device-pixel-ratio: 1.5) {

      html {
zoom: 0.67

      }

    }

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

        if (window.devicePixelRatio == 1.5) {

          x = x/0.67;

          y = y/0.67;

        }