关闭

前端小白系列(2)—— 适配与响应式

标签: 响应式移动设备前端LESS
195人阅读 评论(0) 收藏 举报
分类:

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

首先是适配。在移动互联网时代,基本上企业都希望自己的网页可以很好的在移动设备上跑,所以做适配 很重要。关于适配方案,博主采用的是根据设备宽度除以定值来得到一个比例,再利用这个比例来换算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后就解决了……


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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1651次
    • 积分:96
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档