媒体查询配合rem布局

/* 默认字体大小为 16px */  
html {  
    font-size: 16px;  
}  
  
/* 当屏幕宽度在 320px 到 768px 之间时 */  
@media screen and (max-width: 768px) and (min-width: 320px) {  
    html {  
        /* 例如，将字体大小减少到默认值的 87.5% */  
        font-size: 14px; /* 16px * 0.875 = 14px */  
    }  
}  
  
/* 当屏幕宽度在 768px 到 992px 之间时 */  
@media screen and (max-width: 992px) and (min-width: 769px) {  
    html {  
        /* 例如，保持默认值不变或稍微增加 */  
        font-size: 16px; /* 或者 17px, 18px 等 */  
    }  
}  
  
/* 当屏幕宽度在 992px 到 1200px 之间时 */  
@media screen and (min-width: 992px) and (max-width: 1199px) {  
    html {  
        /* 例如，稍微增加字体大小 */  
        font-size: 18px; /* 或者其他你希望的值 */  
    }  
}  
  
/* 当屏幕宽度大于或等于 1200px 时 */  
@media screen and (min-width: 1200px) {  
    html {  
        /* 例如，进一步增加字体大小 */  
        font-size: 20px; /* 或者其他你希望的值 */  
    }  
}