@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;
}
}