不同缩放比的自适应案例

在看本章案例前，建议先阅读入门必看章节，会更容易理解本案例。

1. 缩放比

一般指windows系统屏幕缩放和布局以及浏览器的缩放

1.1 Windows

1.2 浏览器

1.3 两者的差异

注意：这里仅探讨缩放作用最终体现在浏览器端的效果
这里屏幕分辨率以1920*1080为基准尺寸

• Windows缩放150%，浏览器缩放100%：
  • 对整个浏览器进行放大1.5倍，包括标签栏和地址栏
  • 浏览器总的尺寸变小，计算方式大约是 1920 / 1.5 ≈ 1280，1080 / 1.5 ≈ 720
  • 同一个屏幕上能同时看到的窗口内容变少了，容易导致布局错乱，可能会出现滚动条
  • 如果图片分辨率不足，放大后就会出现像素化、模糊
• Windows缩放100%，浏览器缩放150%：
  • 浏览器仅对网页内容部分进行1.5倍的放大渲染，不包括标签栏和地址栏
  • 如果打开F11全屏展示的话，计算方式同Windows，最终的尺寸也是1280*790
  • 同一个屏幕上能同时看到的窗口内容变少了，容易导致布局错乱，可能会出现滚动条
  • 如果图片分辨率不足，放大后就会出现像素化、模糊

观察上面的结果，可以得出最大的差异就是放大的载体不同，Windows放大的是整个浏览器，浏览器放大的是网页内容。但是也同样带来了2个问题：

1. 布局错乱和滚动条
2. 图片变模糊

下面就通过一个案例的制作来解决上面这2个问题

2. 案例制作

设计稿建议以1440*900为基准尺寸，为什么是1440*900? 以1920*1080为原始尺寸计算：

1. 放大125%最终尺寸是1600*900
2. 放大150%最终尺寸是1280*720
   取中间尺寸1400*900是为了让浏览器有足够的剩余空间可供分配

1. 拿到设计稿后先进行分析，哪些需要自适应，哪些是固定尺寸
   
   
2. 分析好后，创建大屏开始进行制作
   
   常用功能和周计划建议采用部件来制作，方便后期维护
   
3. 最终发布效果
   
   
   
   如果大于150%，会出现什么情况？
   
   可以注意到，大屏出现了横向滚动条，因为设计了最小宽度1100
   
   这个也是合理的，因为随着不断放大，可供分配的剩余空间会越来越小，1400*900的设计稿的向下兼容的尺寸可能最小就是1000了

总结一下

• 通过上述案例的制作，布局错乱的问题没有出现，滚动条在缩放比大于150%时出现，图片采用的@2x来适应高系统DPI环境，避免模糊；
• 上述案例还是比较简单的，真实业务往往比这个要复杂的多，比如纵向会出现滚动条，内容多，制作大屏前一定要先分析哪些是固定，哪些需要自适应；
• 复杂的内容强烈建议采用部件来制作，主大屏的目录结构层级尽可能的不要太深，方便后期维护