1、根据媒体查询设置html的font-size的大小，代码如下：
@media screen and (min-width: 320px) {
html{
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html{
font-size: 50px;
}
}
2、那么rem是怎么换算的呢？我们可以简单的举个例子：
比如一张设计稿的宽度是750px(一般)，你测量了一个100像素的宽度，这个时候你要怎么设置宽度呢？ 实际上就是‘测量的像素‘ / ‘html的字体大小‘，也就是100 / 50 = 2, css中直接设置width:2rem； 这样我们就能看到一种效果，当屏幕宽度大于等于320px小于750px时，实际宽度为 2rem * 21.33px = 42.66px; 当屏幕宽度大于等于750px时，实际宽度为 2rem * 50px = 100px ,实现了在不同的屏幕大小里面等比例缩放，达到自适应的效果
原文：https://www.cnblogs.com/laid/p/14733630.html