vue 移动端与PC端的响应式布局整理

响应式布局大概就是三种方法：
首先必须在页面头部必须有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);