大屏的可视化不只是前端,在团队立项就应该需要UI配合
- 下面的设计场景我以3 * 3 也就是9个1920 * 1080 的屏幕的来举例描述
知道自己屏幕的尺寸
如果不想按照单个屏幕1920 * 1080 的设计稿出，直接出一个3 * 3 的设计稿，显然也是可以的， 但是这个设计稿太大，主要是导致细节方面万一遇见个扣扣搜搜的领导，那就麻烦了。除非你确定以后他不需要适配笔记本
- 举例,不管页面是4 * 12 还是3 * 3的小屏幕，理论上单个屏幕的尺寸应该是1920*1080，也可能公司没钱 买了 980 * 1280 的屏幕，所以这个要了解清楚（打个比方）。所以第一步应该是知道自己适配屏幕的尺寸
协商UI设计的范围
一般来说设计之初,UI都愿意协商。比如单个屏幕按照1920 * 1080 设计以此为基础，串联起公司
- 这么做的目的是方便适配PC端以及笔记本电脑等等
为什么不适用autofix.js
盲目使用缩放会导致大量留白，autofix就是一个虽然好用，但是不够灵活的方案，因为它单方面以缩放目标div的的中心点进行缩放，还是应该自己写一个scale比较好，其实也还好
原理
- 缩放以中心点进行缩放，会导致4边往中心点进行缩放，所以会出现留白，并且，最关键的是导致，内容和内容之间的间距非常之大，如果设计稿 设计好的话，就不会在大屏上看到屏幕间距很大 以及在笔记本端完全无法体验看到全景的问题
- 以左上角进行缩放，会更自然，不会出现在一些特殊笔记本上，看不到的问题，实测大部分机型能看到
如何使用缩放
图画的不好还请原谅，3 * 3的场景中，第二个绿色块设计为1920 * 1080 * 2 占据两个屏幕
-
首先应该把缩放的代码最好统一都放在自己的utils/index， 或者其他目录中
-
计算缩放比例的方法为
const scale=当前屏幕宽度/设计宽度
- 知道缩放比例之后，把它放到css里，并把缩放原点改为
vue or react
scale:${scale};
// 这一步的目的是将默认缩放原点从center 改为左上角，就不会出现溢出屏幕的现象，主要针对少部分机型
transform-origin:top left;
二次开发,不知道设计尺寸应该如何做?
在对方要求很高的基础上，还是要积极询问对方人员基础的信息，不然很难达到理想效果
