做大屏应用展示,怎么适应各个分辨率?

需要做一个大屏应用展示,如果布局是固定宽高的话,那么就只能适应一种分辨率
媒体查询这个,就更加繁琐了,因为也不知道用户会使用的那种分辨率
有没有什么好一点的法子,我看到有些网站是通过tranform scale 来设置缩放达到效果
例如下面这个
https://max.datahunter.cn/dashboard-preview/610d1b79713da14ff3b4652c

有没有更多的一些参考意见,用tranform scale 这种思路是怎么做的呢,我有点好奇

scale(x,y),等比缩放,但是会有计算问题,多少分辨率是1,多少分辨率是1.2,1.3,理论可以计算出来但是相比于rem更为复杂

建议使用 rem 作为布局单位,可以参考 bootstrap 的方法

vw 百分比 简单的可以
稍微复杂点 vw+min-width这种
media+vw
如果要做的很完美的话比较难

用bootstrap框架是最现成的,他对每种设备都进行定义,拿来就用。
无论你用何种方法来自写CSS,缩放也好,媒体查询也好,都是麻烦的。
建议你通过JQ来计算设备分辨率达到自适应目的。

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

我现想的缩放思路,不知道对不对啊,自己比如是按1920*1080做的,scale(当前屏幕宽/1920)