526互联

屏幕自适应

发布时间 2023-06-29 21:15:07作者: 一条瓜

屏幕自适应

三大常用方式

  1. vw/vh方案
    1. 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
    2. 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
    3. 缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦
  2. scale方案
    1. 概述：也是目前效果最好的一个方案
    2. 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.
    3. 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题
  3. rem + vw vh方案
    1. 概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
    2. 优点：布局的自适应代码量少，适配简单
    3. 缺点：留白，有时图表需要单独适配字体

推荐scale方案、

scale根据设计图大小 然后和 浏览器视口100%大小比较 得到他们之间的比例

监视窗口变小、获取到变小后的窗口和原始窗口之间的比例

从而算出根DOM要缩小的比例

但是缩小后会在旁边出现白边 留白

所以在 ！！这里有点绕

将根DOM缩放后 再放大到 跟原来需要放大x分之十倍 就可以填充满这个窗口了

x分之十的叉就是需要缩放的比例 比如缩放了 缩小0.8后只需要把DOM放大八分之十就可以把缩放了的浏览器填满

原文参考

https://blog.csdn.net/qianyu6200430/article/details/130818095
https://juejin.cn/post/7231089453694009404