CSS3屏幕密集媒体查询

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

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

 字体设置由来对应说明

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

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

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