CSS中的rem响应式布局开发

CSS常用的单位：
px 像素 (固定单位)
em 相对单位，相对于父元素的字体大小设定的单位,一个em相当于一个汉字。
还有这些单位：% deg s / ms …

        .box{
               font-size: 14px;
            }
            .box p{
               text-indent: 2em;//首行缩进，两个字体大小
            }

1. rem (root em) 相对于当前页面根元素(HTML)的字体大小设定的。
2. rem布局： 让每一个盒子根据当前屏幕的宽度计算出一个最新的宽度来，来适应整体的布局；
3. rem响应式布局开发
   第一步： 拿到设计稿后，（现在设计稿一般是750px的），我们设定一个初始值的rem和px说我换算比例（一般设置为1rem=100px,为了方便后期换算）
   第二步： 测量出设计稿中的元素的尺寸（ps测出来的px单位），在编写样式的时候全部转换为rem的单位（除100即可） =>100%还原设计稿。
   第三步： 编写一段JS，获取当前设备的宽度，让其除以设计稿的宽度750，再乘以初始的换算比例100计算出当前设备下，1rem应该等于多少像素（只要改变HTML的font-size就可以）；这样HTML字体大小一改，之前所有以rem为单位的元素都会跟着自动缩放…
   1. 有个开发技巧：在移动端最外层容器，不写固定宽度，用百分比。
   2. 现在真实项目中，主体响应式布局以rem为主，部分效果实现可以基于flex来做，需要样式微调整，还是要基于@media来完成的…

        function computed() {
            let width = document.documentElement.clientWidth;
            let w = 750;
            let fontSize = width / w * 100;
            document.documentElement.style.fontSize = fontSize + "px";
        }
        computed();
        window.addEventListener("resize", computed);//resize:当浏览器窗口发生变化的时候，重新执行这个函数