rem适配不同大小屏幕

    解决在不同屏幕大小的情况下，页面自适应，成比例放大缩小问题。

1、css头部定义媒体查询

/*媒体查询,不同屏幕下的根元素字体大小设置，利于rem*/
@media screen and (max-width: 1920px) {
  html {
    font-size: 100px;
  }
}
@media screen and (max-width: 1366px) {
  html {
    font-size: 100px;
  }
}
@media screen and (max-width: 1280px) {
  html {
    font-size: 94px;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 75px;
  }
}
@media screen and (max-width: 800px) {
  html {
    font-size: 59px;
  }
}

上述的定义，理解为：

屏幕大小介于  1366px - 1920px （包含最大值）时，1rem = 100px；

屏幕大小介于  1280px - 1366px （包含最大值）时，1rem = 100px；

屏幕大小介于  1024px - 1280px （包含最大值）时，1rem = 94px；

屏幕大小介于  800px - 1024px （包含最大值）时，1rem = 75px；

屏幕大小小于等于  800px 时，1rem = 59px；

2、以后css涉及到的大小使用单位是rem，来指定大小