前端适配方式一：通过媒体查询的方式即CSS3的meidaqueries1:通过修改单独的样式类来进行适配2:在CSS3中

一：通过媒体查询的方式即CSS3的meida queries

1:通过修改单独的样式类来进行适配

@media only screen and (max-width: 600px) {
    .example {background: red;}
}

2:在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

3:android

/480px的宽度/

<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

(1)媒体类型（Media Type）我们常碰到的就是 all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）

关键字： not only

二：flex 弹性布局

三：rem+viewport缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

inital-scale：页面初始缩放值，默认为1。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

rem是相对于html根元素font-size来变化的，始终是基于根元素字体大小，也代表倍数，浏览器默认的font-size为16px,那么rem单位就是1rem；

四：rem 和 em 方式

em和rem都是相对单位长度，**em**是相对父级`font-size`来变化的，他会继承父级元素的字体大小，代表倍数，如：浏览器默认font-size:16px,那么em就是1em。

不过在实际布局中，如果嵌套过深，em计算起来比较的繁琐，容易出现错误，因此不见大范围使用，小范围可以结合其它长度单位来使用，

rem是相对于html根元素font-size来变化的，始终是基于根元素字体大小，也代表倍数，浏览器默认的font-size为16px,那么rem单位就是1rem；

配合上动态计算rem的javascript代码

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;
	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;        
		if (width >=750) width = 750;
		if(width<=320) width=320;
		var rem = width / 7.5;
		docEl.style.fontSize = rem + 'px';		
	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);
	refreshRem();
})(window);