做大屏应用展示，怎么适应各个分辨率？

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

用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
})

Answer 5

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