lintanfu 2020-11-20 16:18 采纳率: 0%
浏览 1017

大屏幕电视适配采用rem方案时,大屏分辨率过小导致页面不兼容。

大家好。我的网页采用rem方案,需要放到大屏展示。

我利用js控制字体px大小

(function () {
  var rem = 10;
  rem = (rem / 1920) * document.documentElement.clientWidth;
  document.documentElement.style.fontSize = rem + "px";
})();

我按照1920*1080的设计稿开发(我的电脑也是这个分辨率)在我电脑上1rem=10px;可是,以前一直没有考虑过这个问题,就是这样拿到的是屏幕的分辨率,而大屏的分辨率宽度只有960px,也就是导致大屏的1rem=5px,页面乱了套。

这个js方法如果要实现适配,需要获取的是屏幕实际宽度而不是分辨率,不知道为何网上都是这套方案,还是我的用法错误了吗?

还是有什么办法可以获取到设备的实际尺寸呢?

求各路技术人指教。十分感谢。

另外,我前端使用了vue和echarts插件,不过这个应该不影响。

  • 写回答

3条回答 默认 最新

  • 一只成序源 2020-11-20 16:55
    关注

    document.querySelector('body').getBoundingClientRect()

    就可以拿到宽高,偏移量之类的

    评论

报告相同问题?

悬赏问题

  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上