一、百分比布局（又名流式布局）
流式布局的特點就是采用display：flex；來控制整體布局，文字會隨着屏幕的寬度自動延伸，彈性控件的空間會隨着屏寬逐漸加大但不會自動增大，圖片采用百分比進行縮放。
二、rem布局（又名等比縮放布局）
單位：
em：相對單位，使用較少，1em等於當前元素或父元素所設置的font-size大小的值，例如父元素當前字體大小為16px，則子元素或者父元素的1em大小就是16px
rem：相對單位，應用比較多，1rem等於根元素（html元素）的font-size值
vw/vh：應用較多，把屏幕分成100份，1vw等於屏幕寬的1%，那么1vh就是屏幕高度的1%，一般去設置vw的大小值
那么動態去設置font-size的值那？
目前我所學到的有兩種方法也是比較常見的方法。
我們以設計稿按照iPhone6來設計為例 即屏幕寬度像素為375px
方法一、通過JavaScript獲取屏幕寬度
方法二、在css文件中添加如下語句
如果你現在使用的編程軟件為vscode 那么你一定要看我的另一篇文章，配合以上等比縮放布局設置rem的方法即可輕松將布局轉換為等比縮放布局
如何將以前寫過的px為單位的html一鍵轉換為rem為單位：https://www.cnblogs.com/shujiemao/p/13840272.html