关于web端适配屏幕问题

记录贴

公司dashboard页面需要适应平板以及大屏页面的适配

前端适配屏幕大小主要是百分比以及vw和vh还有rem

主要我们说的是 rem

rem它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们前端常说的适配单位rem。

我们可以通过 document.documentElement 获取到根元素root。

如果rem在html根元素没有设定font-size的值时，1rem=16px

设定了的话 需要使用设计稿的宽高除以设定的值，下面我们假定设置的值是18px

html｛font-size:18px｝
           

设计稿的宽高是50x50

换算成rem则为50/18=2.78rem(保留两位小数)

我们封装一个方法用来适配web端和m端

(function () {
      function setFontSize() {
        var winWidth = document.documentElement.clientWidth//获取浏览器宽
        //设置root的fontSize
        document.documentElement.style.fontSize = (winWidth / 1920)*100  + 'px'//（浏览器宽/设计稿宽）*100px;
        console.log(winWidth)
        console.log(document.documentElement.style.fontSize)
      }
      var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'//判断是否有旋转属性(有旋转的为平板和移动端)
      console.log(evt)
      var timer = null
      //监听，屏幕旋转，和web端，大小改变事件，
      window.addEventListener(
        evt,
        function () {

          clearTimeout(timer)
          timer = setTimeout(setFontSize, 300)//防止改变过快还未执行
        },
        false
      )
      window.addEventListener(
        'pageshow',
        function (event) {
          if (event.persisted) {
            clearTimeout(timer)
            timer = setTimeout(setFontSize, 300)//页面显示(pageshow)事件
          }
        },
        false
      )
      // 初始化加载js文件时
      setFontSize()
    })()
           

我们设定的浏览器宽/设计稿宽*100px的目的是为了放大改变的比例这样子我们可以更好的适应web端以及m端，如果将= (winWidth / 1920)*16的话在M端上查看时会有像素差，非常明显，大家可以试一试

封装完成后我们使用只需要把想设置的宽高除以100在加上rem即可

当然vscode有自动转换的工具，小伙伴们可以自行查找

以上内容仅供参考