pc端rem的应用 不同分辨率下页面的比例一样 不影响页面外观 (终于解决)

发布时间 2023-03-22 21:11:32作者: 雪莉06

 

 关键代码:

<script TYPE="text/javascript">    
        var docEl = document.documentElement;
         
        function setRemUnit () {
          var rem = docEl.clientWidth / 19.2; // 可根据不同电脑分辨率进行手动修改(如1920*1080 为19.2
          docEl.style.fontSize = rem + 'px'
        }
 
        setRemUnit()
 
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function (e) {
          if (e.persisted) {
            setRemUnit()
          }
        })
  </script>
问题解惑:原来用chrome和ie 11,做的静态页面可以显示正常;但放到服务器上面动态加载数据,页面出现问题;body { font-size: 0.12rem}解决问题
下面关键代码可以解决pc端 html+js+css 这种非前后端分离架构下的适应各种分辨率小的页面的问题