rem和vw的分析比较

rem：

首先rem是css单位，相比于px固定的像素单位，rem是相对像素单位，更加的灵活。

需求存在：

现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。

一、基本原理：

设计稿宽度：x px
移动设备宽度：y px
Html中font-size=移动设备宽度/设计稿宽度*100
Font-size的值即是1rem=（font-size） px

二、如何根据不同屏幕设置 font-size 大小

1、媒体查询

<style type="text/css">   
   @media screen and (max-width: 320px) {
        html {
          font-size: 20px;
        }
      }  
    @media screen and (max-width: 360px) and (min-width: 321px) {
        html {
          font-size: 24px;
        }
      }
</style>

2、使用 js 方式

<script type="text/javascript">
    // 获取视窗宽度
    let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
    console.log(htmlWidth)
 
    // 获取视窗高度
    let htmlDom = document.getElementsByTagName('html')[0]
 
    htmlDom.style.fontSize = htmlWidth / 10 + 'px'
</script>

rem的缺点：需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦

vw是不是比rem更好的方案？

vw —— 视口宽度的 1/100
vh —— 视口高度的 1/100

不用通过js计算，直接使用即可，但是兼容性却不如rem。

VW的完全兼容需要Android4.4+和ios8+

rem的完全兼容需要Android2.1+和ios6+

另外在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题

所以rem＋vw才应该是最好的方案