大屏适配方法

2022-02-07 18:01:44 阅读：219 来源： 互联网

日常吐槽：

作为一名经常联调接口，开发PC端表单页面的前端开发来说，偶尔来一个需求需要开发大屏页面，而且需要各种适配，第一反应是：我改怎么办？我可以做好吗？我以前没做过呀？怎么办呢?

经过一连串儿的自我怀疑后，还是得老老实实寻找解决办法，好在网上各路大神都多多少少分享过类似的经验，在经过一番实战及刻苦钻研后，自我总结如下，如果你目前也面临这样的困境的话，可以花几分钟时间读读下面的文字，希望对你有所帮助

言归正传：

面对的问题：对于前端开发者来说，大屏开发最主要的有以下几个方面需要考虑

如何适配不同分辨率的屏幕，保持每个div元素在不同分辨率的屏幕下依然显示正常的比例，不会拉伸变形
字体通常情况下，我们会把字体写成固定的px像素值，在普通屏幕下如果不是要求特别严格，PC端通常不会考虑适配；但是在大屏模式下，固定的像素值看起来就如同在山顶看山脚下的汽车一般，极为渺小

解决办法：

① css3 transform:scale()方法

此方法需固定屏幕宽高，适合整个项目都是大屏页面的工程，但如果是一个项目里嵌入几个大屏页面的话，不推荐此方法；该方法可以解决屏幕适配、字体适配的问题

缩放以后四周会留有空白，如下代码可以解决空白问题

function resize() {
          var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可
          var ratioY = $(window).height() / 1080;
          $("body").css({
              transform: "scale(" + ratioX + "," + ratioY + ")",
              transformOrigin: "left top",
              backgroundSize: "100% 100%"
          });
          $("html").css({'overflow':'hidden'})
}
$(window, document).resize(function () {
  resize();
});
resize();

② 百分比+rem 方法

百分比布局不用多说，宽高都用百分比来布局就行，保证自适应；本人也曾尝试过flex布局，但是总是会有各种奇奇怪怪的问题，会把宽度撑开，导致没有自适应，所以保准点还是采用百分比布局吧；

rem借鉴移动端的字体适配方法，大家都知道移动端屏幕本来就很小，所以必须保证字体在不同分辨率下显示最佳大小

setRem(){
    var whdef = 100 / 1366; // 表示1366的设计图,使用100PX的默认值
    var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
    var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    // document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
    document.documentElement.style.fontSize = rem + "px";
}
 mounted() {
     this.setRem()
    window.addEventListener("load", this.setRem());
    window.addEventListener("resize", this.setRem(),false);
}

以就是大屏适配的两种较为简单的方法，当然还有媒体查询可以来适配，如果以上两种方法都不好使的情况下，媒体查询也不失为一个最简单有效的方法。

写在最后：

好了，希望这篇小小的总结可以给屏幕前的朋友提供一点微小的帮助，如有什么不清楚的地方可以留言，大家可以互相讨论，共同进步!

标签：适配,var,window,rem,大屏,屏幕,方法
来源： https://blog.csdn.net/qq_41238459/article/details/122812296