rem用法-两步实现响应式布局

rem 根据根目录字体大小来适应

1:设置html字体大小

<style>
	html {
      font-size: 10px;
    }
</style>

2:HTML设置rem

<script type="text/javascript">
  function init() {
    let designSize = 1920; // 设计图尺寸
    let html = document.documentElement;
    let wW = html.clientWidth;// 窗口宽度
    if(wW<1366){
      wW=1366;
    }
    let rem = wW * 100 / designSize;
    document.documentElement.style.fontSize = rem + 'px';
  }
  init();
  window.onresize = function () {
    init();
  }
</script>

3:使用：1rem == 100px

<style>
	div {
      width:1rem;  // 100px
      height:0.5rem; // 50px
    }
</style>