CSS3屏幕密集媒体查询

 1 html { font-size: 50px; }
 2 body { font-size: 24px; }
 3 @media screen and (max-width: 359px) {
 4     html { font-size: 21.33px; }
 5     body { font-size: 12px; }
 6 }
 7 @media screen and (min-width: 360px) {
 8     html { font-size: 24px; }
 9     body { font-size: 12px; }
10 }
11 @media screen and (min-width: 375px) {
12     html { font-size: 25px; }
13     body { font-size: 12px; }
14 }
15 @media screen and (min-width: 384px) {
16     html { font-size: 25.6px; }
17     body { font-size: 14px; }
18 }
19 @media screen and (min-width: 400px) {
20     html { font-size: 26.67px; }
21     body { font-size: 14px; }
22 }
23 @media screen and (min-width: 414px) {
24     html { font-size: 27.6px; }
25     body { font-size: 14px; }
26 }
27 @media screen and (min-width: 424px) {
28     html { font-size: 28.27px; }
29     body { font-size: 14px; }
30 }
31 @media screen and (min-width: 480px) {
32     html { font-size: 32px; }
33     body { font-size: 15.36px; }
34 }
35 @media screen and (min-width: 540px) {
36     html { font-size: 36px; }
37     body { font-size: 17.28px; }
38 }
39 @media screen and (min-width: 720px) {
40     html { font-size: 48px; }
41     body { font-size: 23.04px; }
42 }
43 
44 @media screen and (min-width: 750px) {
45     html { font-size: 50px; }
46     body { font-size: 24px; }
47 }

字体设置由来对应说明

/* 修复iphonex以上的底部安全区域问题 */
 //iphoneX、iphoneXs
@media only screen and (device-width: 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-width: 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-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
  .ui-tab-bar {
    padding-bottom: 0.5rem !important;
  }
}