通过rem 响应式布局、vw , vh百分比布局来实现移动端和 pc 端的自适应

一、rem 响应式布局

rem是一个相对单位，参照HTML的字体大小（font-size）来自适应。
页面用 rem 进行布局，当需求要调整网页整体大小时只需要修改HTML的字体大小，页面能同步变化，如下：

二、vw、vh百分比布局

vw：参照视口宽度大小
vh：参照视口高度大小

100vw = 整个视口，相当于把整个视口分成100份；
视口的1vw = 视口宽度的一份；
视口的1vh = 视口高度的一份；
vw窗口的比例 = 高度/视口的宽度；
同理，vh比例 = 宽度/视口的高度
eg：
width: 750px; height: 350px; vw = 350/750 = 0.466 * 100% = 46.6vw

注意⚠：

1. 做适配处理，能够让页面在不同尺寸屏幕上进行适配，无论在什么型号的手机上页面宽高比例都保持不变。
2. 在移动设备里，取宽度参考比取高度参考安全（vw），因为当我们在移动设备输入的时候会弹出键盘，很容易影响到页面的高度