方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果。

function adaptor(){
                //为了便于计算,这里以1920px为基准
                let width = document.body.clientWidth
                let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px";
            }
            adaptor();
            window.onresize = function() {
                adaptor()
            }

实际效果如下:

pc端的弹性布局适配方案

pc端的弹性布局适配方案

pc端的弹性布局适配方案

 

相关文章:

  • 2022-12-23
  • 2021-08-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-02
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-12
  • 2021-07-09
  • 2022-12-23
相关资源
相似解决方案