移动端样式尺寸，确定是要用
rem？
方案一：rem
我们一般采用rem时设置的根字体大小为：
<script>
function setRem() {
const deviceWidth = document.documentElement.clientWidth;
const fontSize = (deviceWidth * 100) / 750;
document.documentElement.style.fontSize = fontSize + 'px';
}
setRem();
</script>
获取屏幕尺寸，扩大100倍后再除于750,相当于将屏幕分成了7.5份。如果屏幕逻辑像素是375px，相当于在项目中的1rem等于50px,0.5rem相当于25px。
先看个例子：
<p style="font-size: 0.5rem">我在第一行先省略几十个文字。如果我买的手机更大，我想第一行看到更多的文字，而不是更大的文字，我买的又不是老年机，字那么大干啥。</p>
320px屏幕显示效果：
375px屏幕显示效果：
768px屏幕显示效果：
是不是发现一个问题，当我们用rem的时候，从320px到768px，屏幕尺寸变大了，但是，字变大了，我们花那么多钱买个大手机肯定不是为了看到更大的字吆~
方案二：px
可以看下用px做为单位的例子：
<p style="font-size: 25px">我在第一行先省略几十个文字。如果我买的手机更大，我想第一行看到更多的文字，而不是更大的文字，我买的又不是老年机，字那么大干啥。</p>
320px屏幕显示效果：
375px屏幕显示效果：
768px屏幕显示效果：
当使用px时，不管屏幕尺寸大小，字体浏览体验是一样的，只是屏幕小了多放几行，屏幕大了少放几行。
结论
当然这里仅仅用文字来举例是只是为了说明一个问题，rem不一定是移动端的唯一适配方案，对于一般浏览或者功能性页面，也可以使用px与flex布局配合使用的方式去做适配。对于游戏类的业务，可以使用rem，也可以使用目前兼容性比较好的vw和vh。
