响应式布局2—实现

1、PC端js控制
只在宽度上做两种适配:宽屏与窄屏。
定义一个窄屏临界值，如1245px.默认屏幕是宽屏的，当屏幕宽度小于1245px时，认为是窄屏。对窄屏写特殊样式。
下面是我写的自适应js文件。

<script>
$(function(){
	var small = 1245;
	var timer = null;
	function querryView(){
		$('body').removeClass("w1024");
		var w = document.documentElement.clientWidth;
		if (w < small) {
			$('body').addClass("w1024");
		}
	}
	$(window).resize(function (e){
		clearTimeout(timer);
		timer = setTimeout(querryView,50);
	});
	querryView();
	})
</script>

设置定时器的原因是避免快速重复resize时，重复执行函数影响性能。而设置50ms的定时器，既可以不重复执行querryView影响电脑性能，也可以不让窗口缩放时出现卡顿现象。关于样式：先写全局样式，然后针对窄屏写适应样式。
ps：根据具体情况，可以设置网页为多个状态，比如：窄屏、中屏、宽屏、超宽屏，对每个状态设置临界值，根据临界值赋予页面多种class即可。
比如以下为3种状态的js文件：

<script>
$(function(){
	var small = 1245;
	var middle = 1345;
	var timer = null;
	$body = $("body");
	var classArr = ['w1024','w1235','w1280'].join(' ');
	function querryView(){
		$('body').removeClass(classArr);
		var w = document.documentElement.clientWidth;
		if (w < small) {
			$body.addClass("w1024");
		}
		else if (w>= small && w < middle){
			$body.addClass("w1235");
		}
		else{
			$body.addClass("w1280");
		}
	}
		clearTimeout(timer);
		timer = setTimeout(querryView,100);
	});
	querryView();
	})
</script>

关于样式：先写全局样式，然后针对窄屏、中屏、宽屏写适应样式。如果觉得这样写样式区分太细。可以在中屏及宽屏上做一个统一样式，再针对中屏写样式，那么改写js文件如下：

<script>
$(function(){
	var small = 1245;
	var middle = 1345;
	var timer = null;
	$body = $("body");
	var classArr = ['w1024','w1235','w1280'].join(' ');
	function querryView(){
		$('body').removeClass(classArr);
		var w = document.documentElement.clientWidth;
		if (w < small) {
			$body.addClass("w1024");
		}
		else {
			$body.addClass("w1280");
			if (w>= small && w < middle){
				$body.addClass("w1235");
			}
		}
	}
		clearTimeout(timer);
		timer = setTimeout(querryView,100);
	});
	querryView();
	})
</script>

2、HTML5+CSS3
2.1、创建HTML5标签
2.1.1、如果浏览器支持HTML5标签
直接使用HTML5标签。
2.1.2、如果浏览器不支持HTML5标签
ie9之前的ie浏览器不支持HTML5标签。
a)引入html5.js帮助旧版本的IE浏览器创建HTML5元素节点。
b)并将article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section声明为块级元素。

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}
</style>

2.2、引入CSS3之media query
2.2.1、如果浏览器支持CSS3之media query
直接使用media query。
2.2.2、如果浏览器不支持CSS3之media query
使用css3-mediaqueries.js帮助ie9之前的浏览器支持CSS3之media query。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2.3、HTML设置

<meta name="viewport" content="width=device-width; initial-scale=1.0">

参考文章：
适配不同分辨率屏幕