css and in rem em on

      px is a fixed pixel, once set because you can not fit the page size is changed.
　　rem em and more flexible with respect px, they are relative length unit, meaning that a given length not dead, in response to a more suitable layout.
      For the difference between em and rem sentence: em with respect to the parent element, relative to the root element rem (html).
      When this is done with rem responsive, html directly change the font-size then the corresponding change in the media used as the rem unit size elements are.
      When this is done with rem responsive, html directly change in the media then the corresponding font-size changing unit used as an element rem size will be very convenient.
                  

REM:
 HTML {
    font-size: 10px;
    }
div {
    font-size: 4rem; / * 40px * /
    width: 30rem; / * 300px by * /
    height: 30rem;
    border: Solid 1px Black;
}
P {
    font-size: 2rem; / * 20px * /
    width: 15rem;
    height: 15rem;
    border: 1px Red Solid;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: 1px Solid Blue;
    the display: Block;
}

vue used rem layout: Add a js code frame erected in the inlet index.html file:

 activeResize ();
window.onresize = function () {
  activeResize ();
}
activeResize function () {
  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';
}

      then write css units can be replaced px rem.
ratio set here is 100px = 1rem,
for example: width is 100px, can be directly written 1 rem