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