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

大屏幕电视适配采用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条回答 默认 最新

相关推荐 更多相似问题