react移动端自适应用rem

1.在系统唯一html文档中写入方法如下:

function resetWidth() {

          // 兼容ie浏览器 document.body.clientWidth

          var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;

          console.log(baseWidth);

          // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整

          document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'

      }

      resetWidth();

      window.addEventListener('resize', function () {

          resetWidth();

      })     

2.然后在style样式文件中的globle.less文件中写入样式:

html:{font-size:100px} body{font-size:16px}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容