rem less

rem

@media screen and (max-width: 2000px) {

  html {

    font-size: 40px;

  }

  p {

    background-color: green;

  }

}

@media screen and (max-width: 1000px) {

  html {

    font-size: 30px;

  }

  p {

    background-color: blueviolet;

  }

}

@media screen and (max-width: 750px) {

  html {

    font-size: 20px;

  }

  p {

    background-color: red;

  }

}

 

 

 

 

less

@color: red;

div {

  width: 200px;

  height: 200px;

  background-color: @color;

  p {

    width: 100px;

    height: 100px;

    background-color: blue;

  }

}