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

胡萝北
  • 243

电脑分辨率: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
自己列个竖式,约约分就算出来了:
image.png
所以,设计图上的尺寸都/100,就是rem了
例如:125px ===> 写成1.25rem就OK了~

回复
阅读 1.1k
3 个回答

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

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

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


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

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

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

可以拿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,得到的值乘以当前屏幕的宽度的值再赋值给当前元素

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏