h5屏幕适配

H5屏幕适配的三种方案

1-rem动态适配

通过获取屏幕宽度来设置html的fontSize，用rem来配置相关元素的宽高。

 remViewport()
        function remViewport(){
             const html = document.querySelector('html');
            const width =window.screen.width
            html.style.fontSize = width/7.5 +'px'
            //1rem = 100px
        }

如上我们已经将1rem等价于100px,在配置其它相关元素时，我们只需要对其进行相关换算就行。

2-动态改变meta viewport标签

通过获取屏幕的宽度来缩放页面

 fixWidth()
      window.addEventListener('resize',fixWidth)
      function fixWidth(){
          //屏幕宽度
          const width =window.screen.width

          //设计图宽度
          const fixedWidth = 750;
          const scale = width / fixedWidth;

          const meta = document.createElement('meta')
          meta.setAttribute('name','viewport')
    	  meta.setAttribute('content',`width=${fixedWidth},initial-scale=${scale}`)
          document.head.appendChild(meta)
      }

3-vw适配

1vw = 1%视口宽度,通过给rem赋值给vw，然后给相关元素配置rem

<!-- 设置图宽度为750px-->
html{
    font-size: 1rem;
}
<!-- 100/7.5=13.333333   1rem =13.333333vw     1rem = 100px-->