移动端

/* 小屏手机 iphone5 */
@media all and (max-width:320px) {
  html {
    font-size: 12px;
  }
}

/* 中屏手机 iphone678 */
@media all and (min-width:321px) and (max-width:375px) {
  html {
    font-size: 14px;
  }
}

/* 大屏手机 iphone678plues */
@media all and (min-width:376px) and (max-width:414px) {
  html {
    font-size: 16px;
  }
}

PC/大屏

   /* 注意：此时超小屏幕和小屏幕在768px之间有冲突，把超小屏幕的区间降低1px为767px*/
    /* 小型设备（平板电脑，768px 以上） */
    @media screen and (min-width:768px) {
      /* // 小屏幕  768px-992px */
    }

    /* 中型设备（台式电脑，992px 以上） */
    @media screen and (min-width:992px) {
      /* // 中等屏幕 992px - 1200px   */
    }

    /* 大型设备（大台式电脑，1200px 以上） */
    @media screen and (min-width:1200px) {
      /* // 大屏幕  大于1200px */
    }