pc端媒体查询适配 @media

/* 方法一 */
@media screen and (min-width: 1024px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 1100px) {
  html {
    font-size: 12px;
  }
}
/* @media (min-width: 1280px) { html{font-size: 22px;} } */
@media screen and (min-width: 1280px) {
  html {
    font-size: 12px;
  }
}
@media screen and (min-width: 1366px) {
  html {
    font-size: 13px;
  }
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1680px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 2048px) {
  html {
    font-size: 20px;
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: 26px;
  }
}
@media screen and (min-width: 4096px) {
  html {
    font-size: 40px;
  }
}

/* 方法二 */
/*屏幕大于1200排序（大屏幕电脑）*/
 @media screen and (min-width: 1200px){html{font-size: 19px;}} 
/*屏幕在1024px到1199之间（中屏幕电脑）*/
 @media screen and (min-width: 1024px) and (max-width: 1199px){html{font-size: 19px;}} 
/*屏幕在768px到1023之间（小屏幕-pad）*/
 @media screen and (min-width: 768px) and (max-width:1023px){html{font-size: 14px;}}  
/*屏幕在480px到768之间（主要是手机屏幕）*/
@media screen and (max-width: 768px){}   

ie8兼容

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>