响应式布局大概就是三种方法：
首先必须在页面头部必须有mate声明的viewport,
**1，**百分比布局。就是margin，padding啥的都是百分比。
**2，**媒体查询（@media），移动端优先首先使用的是min-width，PC端优先使用的max-width。
3，rem布局，rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准。
**4，**视口单位，css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：
vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin vw和vh中的较小值
vmax vw和vh中的较大值
<meta name="’viewport’" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
以下是根据网上整理较为方便的rem实现方法
移动端
在index.html里直接添加js，设置全局默认字体大小，8px=0.16rem
*{font-size: 100px;}.dom{font-size: 0.5rem (50px/100px);}
在表头禁止缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<script>fnResize();window.onresize = function () {fnResize();}function fnResize() {var deviceWidth = document.documentElement.clientWidth || window.innerWidth;if (deviceWidth >= 750) {deviceWidth = 750;}if (deviceWidth <= 320) {deviceWidth = 320;}document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';}</script>
PC端
在index.html里直接添加js，设置全局默认字体大小，8px=0.08rem
function setRem() {var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值var bodyWidth = document.body.clientWidth;// 当前窗口的宽度var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';}window.addEventListener('load', setRem);window.addEventListener('resize', setRem);
