大屏幕电视适配采用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插件,不过这个应该不影响。

查看全部
waylen_1997
lintanfu
2020/11/20 16:18
  • html5
  • vue.js
  • javascript
  • css3
  • 点赞
  • 收藏
  • 回答
    私信

2个回复