前端小白系列（2）—— 适配与响应式

讲分页的相关制作前，博主还是先填下自己在背景那挖的坑吧。

首先是适配。在移动互联网时代，基本上企业都希望自己的网页可以很好的在移动设备上跑，所以做适配 很重要。关于适配方案，博主采用的是根据设备宽度除以定值来得到一个比例，再利用这个比例来换算px成rem的方案，具体有不清楚的可以参考这篇文章：http://www.cnblogs.com/lyzg/p/4877277.html

还有一种适配方案是设置meta中的initial-scale的值来让网页自行换算px，大家可自行选择适配方案。

上效果图先（PC端移步上一节）。默认是只出现Navbar按钮，点击按钮后会出现列表。

代码方面，因为rem单位是根据文档根节点的font-size值来计算的（1rem=根节点的font-size的值），所以可先添加以下js代码来根据设备宽度设置根节点font-size（代码中的10可以根据需要自行更改）

<script type="text/javascript">
	(function() {
		var html = document.getElementsByTagName("html")[0],
			oClientWidth = document.documentElement.clientWidth;

			html.style.fontSize = oClientWidth / 10 + "px";
	})()
</script>

HTML代码与上一节基本一样，只是在#wrap中加多了个按钮做响应式操作。

<div id="wrap">
	<button class="nav-list">Navbar</button>

因为样式中的单位基本换成了rem，所以代码也有所更改，重新贴上和背景相关的less代码吧。

/* --------------------- 根据不同设备提供不同大小的图片以优化资源 ------------------------- */
@media (max-width: 767px) {
	@bg-pic : "../images/bg_s.jpg";
	body{
		background: url(@bg-pic) center center no-repeat fixed; /*背景图片居中不重复并保持固定*/
	}
}
@media screen and (min-width: 768px) {
	@bg-pic : "../images/bg.jpg";
	body{
		background: url(@bg-pic) center center no-repeat fixed; /*背景图片居中不重复并保持固定*/
	}
}
/* ----------------------------------------------------------------------------------------- */
body{
	background-size: cover; /*覆盖背景*/
}

/*------------------------ 内容主体 -----------------------*/
#wrap{
	margin: 0 .5rem;
	margin-top: .3rem;
	position: relative;
	/*导航  阴影和border相关的px值作了保留 */
	.navbar li{
		border: 1px solid lighten(@gray,20%);
		border-radius: 10px;
		cursor: pointer;
		text-align: center;
		font-size: 18px;
		-webkit-transition: 0.4s;
		transition: 0.4s;
		box-shadow: 3px 3px 5px darken(@gray,10%);
		&:nth-child(1){
			background-color: lighten(@red,10%);
		}
		&:nth-child(2){
			background-color: lighten(@orange,10%);
		}
		&:nth-child(3){
			background-color: lighten(@yellow,10%);
		}
		&:nth-child(4){
			background-color: lighten(@green,10%);
		}
		&:hover{
			box-shadow: 7px 7px 8px darken(@gray,20%);
			a{
				color: white;
			}
		}
	}
}

看上面的代码是否一头雾水呢？靠这些代码怎么做出来的效果？？额……其实还有下面这些。

大屏和PC端显示，采用了flex-box布局

/*----------------------------- 媒体查询 ---------------------------*/
@media screen and (min-width: 768px) {
	#wrap{
		.navbar{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			    li{
			    	display: inline-block;
			    	min-width: .8rem;
			    	line-height: .4rem;
			    	margin-right: .3rem;
			    }
		}
	}
	.nav-list{ /*隐藏小屏才出现的按钮*/
		display: none;
	}

小屏时则将navbar隐藏，只显示一个替代按钮。通过点击按钮才弹出隐藏的navbar。

@media (max-width: 767px) {
	#wrap{
		.navbar{
			display: none;
			padding-top: .4rem;
			width: 100%;
			    li{
			    	display: inline-block;
			    	width: 100%;
			    	line-height: .3rem;
			    	margin-top: .05rem;
			    }
		}
	}
	.nav-list{
		width: 1rem;
		height: .4rem;
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		margin: 0 auto; /*居中定位*/
		font-size: 25px;
		border-radius: 10px;
		.btnColor(darken(aqua,10%),linear-gradient(white,black));
		.btnColor(darken(aqua,10%),-webkit-linear-gradient(white,black));
		cursor: pointer;
		z-index: 10; //防止被其他内容遮挡
		box-shadow: 0 0 25px #111;
		&:hover{
			color: lighten(aqua,10%);
			box-shadow: 0 0 25px white;
		}
	}

nav-list的样式里用到了LESS语法里的mixin。很简单

/*--------------------- 按钮样式 ------------------------*/
.btnColor (@btnColor: black; @backgroundColor: white;){
	color: @btnColor;
	background: @backgroundColor;
}

CSS方面总结下：

1.同一张图应该有多种大小的资源，以根据显示设备加载不同资源，防止造成浪费。

2.做响应式布局，同一元素的共用属性可不在媒体查询中编写。

3.利用display属性来灵活布局。

4.要熟练掌握不同元素（有无宽高等）的横竖居中方式。

5. 有些标签有默认font-size，如ul标签，需设置为0。

JS方面主要是处理小页面时的导航展示，简单的说就是先判断页面大小，再对小页面展示出来的按钮绑定个点击事件，改变Navbar的display值。

/*----------------------- 函数封装 ------------------------------*/
var myFn = {
	//判断节点是否存在相应的class
	hasClass : function(className,ele) {
		return new RegExp("(^|\\s)" + className + "(\\s|$)").test(ele.className);
	},

	//通过节点的class来获取节点
	getByClass : function(name,ele) {
		var ele = ele || document;
		if(ele.getElementsByClassName) {
			return ele.getElementsByClassName(name);
		} else {
			var allEle = ele.getElementsByTagName("*"),
				len = allEle.length,
				result = [];
				for (var i = 0; i < len; i++) {
				if(myFn.hasClass(name,allEle[i])) { //调用下面的hasClass函数
					result.push(allEle[i]);
				}
			}
			return result;
		}
	},

	// 事件兼容
	addHandler : function(ele, type, handler) {
        if(ele.addEventListener) {
          ele.addEventListener(type, handler, false);
        } else if(ele.attachEvent) {
          ele.attachEvent('on' + type, handler);
        } else {
          ele['on' + type] = handler;
        }
     },

    //获取样式
    getStyle : function(obj,attr) {
    	if(obj.currentStyle) {
    		return obj.currentStyle[attr];
    	} else {
    		return getComputedStyle(obj,false)[attr];
    	}
    },

以上都是些常用函数的兼容性代码，把它们都封装在一个对象里来调用，防止命名冲突。

/*------------------------ 主程序 -----------------------------*/
var component = (function() {
	// 小屏时点击Navbar按钮展示组件
	var showNavbar = function(size) { //size为传递过来的页面宽度
				var oNavbar = myFn.getByClass("navbar")[0];
				if(size < 768) { //判断是否为小页面的宽度
					var oNavList = myFn.getByClass("nav-list")[0]; //获取小页面的按钮
					oNavbar.style.cssText = "display: none"; //先让flex布局的导航隐藏
					oNavList.onclick = function() {
						oNavbar.style.display = (myFn.getStyle(oNavbar,"display") === "none") ? "block" : "none";//通过按钮的点击事件显隐导航
					}
				} else {
					oNavbar.style.cssText = "display: -webkit-box;display: -ms-flexbox;display: flex;"; //大页面则重新flex布局
				}
		}

return { //提供外部接口
		showNavbar : showNavbar,
		pagination : pagination
	}

window.onresize = function() { //页面改变时，获取当前宽度
	var oEleWidth = document.documentElement.clientWidth; //获取屏幕宽度
	component.showNavbar(oEleWidth); //传递宽度
}

博主将页面要实现的功能和一些功能函数分成两个模块，用var fn = (function() {})()的模块模式编写代码，通过返回相应接口给外部提供功能引用，而不会造成过多的全局污染，也保护了私有变量。

JS总结：

1.时刻记得不要暴露过多的全局变量，全局变量越少越好

2.非必要的变量和函数私有化，防止被外部不小心更改了

3.代码兼容性

写oNavList这个按钮的点击事件时，博主遇到个坑——按钮点击后导航没展示出来，需要调整页面到特定尺寸才有反应！

经调试，导航没展示的情况也能触发点击事件里的完整代码，但就是不展现导航。。。当时那个一脸蒙蔽的= =||

考虑到兼容性，博主一开始写点击事件是这样的

myFn.addHandler(oNavlist,"click",function() {...})

可曾想被这货坑了，至今被坑的不明觉厉。（貌似没啥毛病啊，而且偶尔可以起作用啊，不明白为什么有失常表现。有相同被坑经历的童鞋可以解释 下吗？）

后来直接改成.onclick后就解决了……

接下来讲分页啦，博主又踩了哪些坑呢？敬请期待……