css中关于rem和em

      px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
      对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素(html)。
      当用rem做响应式时，直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。
      当用rem做响应式时，直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变，很方便。
                  

rem:
 html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
}

vue 中使用rem布局：在搭建的框架入口文件 index.html中添加一段js代码：

 activeResize();
window.onresize = function () {
  activeResize();
}
function activeResize() {
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
  if (deviceWidth >= 750) {
    deviceWidth = 750;
  }
  if (deviceWidth <= 320) {
    deviceWidth = 320;
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';
}

      然后在写css就可以将px单位换成rem.
这里设置的比例是100px=1rem,
例如:宽度为100px时,可以直接写成1rem