@media only screen and (min-width: 320px) { html { /*此时1rem = 12px;*/ font-size: 50px; } } @media only screen and (min-width: 375px) { html { font-size: 58.59375px; } } @media only screen and (min-width: 414px) { html { font-size: 64.6875px; } } @media only screen and (min-width: 480px) { html { font-size: 75px; } } @media only screen and (min-width: 560px) { html { font-size: 87.5px; } } @media only screen and (min-width: 640px) { html { /*此时 1rem = 200px*/ font-size: 100px; } } @media only screen and (min-width: 720px) { html { font-size: 112.5px; } } @media only screen and (min-width: 750px) { html { font-size: 117.1875px; } } @media only screen and (min-width: 800px) { html { font-size: 125px; } } @media only screen and (min-width: 960px) { html { font-size: 150px; } }