响应式大屏项目的尺寸应该怎么写

Question

电脑分辨率：1920 * 1080
美工给的设计图： 8000 * 2400
大屏的具体分辨率不知道，美工说大屏的尺寸和设计图的尺寸比例是一致的。

因为没有任何开发大屏项目的经验，所以一时间不知道怎么上手。
就拿字体来说 ，设计图上的主标题字体大小是：font-size:125px; 我本地开发的时候设置HTML中的font-size:16px; 那主标题的字体咋写呢？字体尺寸、容器尺寸应该怎么写？

====2021-07-09==========
两个页面都开发完了，用rem做的。我是这么个思路：
1、设置HTML根元素的font-size = 屏幕宽度/80 = 1920/80
（这里为啥÷80，因为设计图尺寸是8000 x 2400，8000和80能约掉，好算。）
开发时电脑屏幕尺寸是1920 ；
设计图尺寸是8000 x 2400，大屏的实际尺寸是 11520*3456 ；化简之后，宽：高 = 10:3；
所以设置项目宽为100%，高为30vw；

/******设置根元素字体大小*******/
!function(win,doc){
  var d=doc.documentElement;
  function change(){
      d.style.fontSize= d.clientWidth/100+'px';
      win.sourceSize = d.clientWidth/100
  }
  win.addEventListener('resize',change,false);
  change();
}(window,document);

2、设计图尺寸/电脑屏幕尺寸 = 8000 / 1920 = 设计图上某元素的width / 开发时页面上某元素的width
自己列个竖式，约约分就算出来了：

所以，设计图上的尺寸都/100，就是rem了
例如：125px ===> 写成1.25rem就OK了~

Answer 1

1920x1080，化简得到 16:9
8000x2400，化简得到 10:3，为了方便比较，可以换算成 30:9

所以，设计图和显示器的比例肯定是不一样的，而且差别还有点大，这么大的差别，不太可能通过细微的裁剪来达到原比例呈现的 ……

好吧，假设可以，把 8000x2400 载成了 4267x2400（非常接近 16:9），这个时候可以算缩放比，把 2400 缩小到 1080，是 * 0.45，所以 125 * 0.45 是 56.25。这就是在这种情况下字体的大小……

---

以上，都是基于显示器来算的。实际的大屏可能是由多个小屏拼成的。如果用 4:3 的屏，只需要横向 5 块，纵向 2 块就可以拼成 10:3 这个比例〔(5 * 4) : (3 * 2) = 10 : 3〕。

具体该怎么算要算实际的屏是多大分辨率，然后参与上面基于显示器的算法。

就是基本的数字计算，没啥难度。

Answer 2

可以拿125/8000约等于0.02，然后在获取屏幕宽度乘以0.02得到字体大小
例：

<div class='banner'>
  <img src='图片.jpg' alt=''>
  <p>文字</p>
</div>

<script>
  var width = $('body').width();
  $('.banner p').css('font-size',width * 0.02);
</script>

可以给所有的文字加一个相同的class，知道8000px字体大小，再用遍历获取字体的大小，去除以8000，得到的值乘以当前屏幕的宽度的值再赋值给当前元素

Answer 3

chrome调试工具可以自定义设备的显示尺寸
要不你就直接改成8000 * 2400 去搞?
点击手机小图标 选择分辨率 选择edit 然后根据提示添加