CSS3屏幕密集媒体查询

 html { font-size: 50px; }
 body { font-size: 24px; }
 @media screen and (max-width: 359px) {
     html { font-size: 21.33px; }
     body { font-size: 12px; }
 }
 @media screen and (min-width: 360px) {
     html { font-size: 24px; }
     body { font-size: 12px; }
 }
 @media screen and (min-width: 375px) {
     html { font-size: 25px; }
     body { font-size: 12px; }
 }
 @media screen and (min-width: 384px) {
     html { font-size: 25.6px; }
     body { font-size: 14px; }
 }
 @media screen and (min-width: 400px) {
     html { font-size: 26.67px; }
     body { font-size: 14px; }
 }
 @media screen and (min-width: 414px) {
     html { font-size: 27.6px; }
     body { font-size: 14px; }
 }
 @media screen and (min-width: 424px) {
     html { font-size: 28.27px; }
     body { font-size: 14px; }
 }
 @media screen and (min-width: 480px) {
     html { font-size: 32px; }
     body { font-size: 15.36px; }
 }
 @media screen and (min-width: 540px) {
     html { font-size: 36px; }
     body { font-size: 17.28px; }
 }
 @media screen and (min-width: 720px) {
     html { font-size: 48px; }
     body { font-size: 23.04px; }
 }

 @media screen and (min-width: 750px) {
     html { font-size: 50px; }
     body { font-size: 24px; }
 }

 字体设置由来对应说明

/* 修复iphonex以上的底部安全区域问题 */
 //iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: ) {
  .ui-tab-bar {
    padding-bottom: .5rem !important;
  }
}

//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:) {
  .ui-tab-bar {
    padding-bottom: .5rem !important;
  }
}

//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:) {
  .ui-tab-bar {
    padding-bottom: .5rem !important;
  }
}