关闭

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

标签: 响应式移动设备前端LESS
262人阅读 评论(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
查看评论

web前端小白入门教程

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。 既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 htm...
  • coco510
  • coco510
  • 2016-05-06 00:44
  • 1056

【备忘】2017年最新web前端工程师小白零基础入门到大神全套教程下载

2017年最新web前端工程师小白零基础入门到大神全套教程下载 百度网盘下载
  • qq_38472476
  • qq_38472476
  • 2018-01-31 12:06
  • 57

一个前端小白的面试之路

第一次写自己的博客,居然是写自己的职业,哈哈,算是一种缘分吧,只是想讲讲自己的面试之路 想来自己的第一次面试也不是自己的职业,而是做兼职,我还清晰的记得是去某饮料厂装箱。那是在学校的贴吧里面看见了招聘,想着反正寒假也没啥事,就去试试,面试也没什么技术含量,当然,只是去当苦力的,手脚和心智健全就应该...
  • QingFeng_or_qinfeng
  • QingFeng_or_qinfeng
  • 2016-10-18 23:21
  • 462

单片机小白学步系列(十一) 购买成品开发板

原文发表自我的个人主页,欢迎大家访问~转载请保留本段,或注明原文:http://www.hainter.com/mcu-primer-11 学习单片机时,我们通常有必要选择一款合适的成品单片机开发板,毕竟所有的电路都自己搭建学起来很不容易。这一篇简单介绍下成品开发板相关的知识。 成品开发板我们可...
  • jzj1993
  • jzj1993
  • 2014-10-21 20:23
  • 2027

前端小白--导航(一)

本文主要介绍下拉导航分别通过纯css和纯js实现 案例图片展示 Tips:纯css实现的兼容性比较好,纯js的代码兼容性不太友好,需要引用的朋友要自行优化。
  • qq_38209578
  • qq_38209578
  • 2017-12-13 18:53
  • 76

前端小白的学习历程

本文会不断更新,用于记录自己从0开始学前端的过程。 基础学习总结 下一步计划,疑问求助
  • passworde
  • passworde
  • 2017-05-21 18:47
  • 242

破解前端面试(80% 应聘者不及格系列):从 DOM 说起(转载)

破解前端面试(80% 应聘者不及格系列):从 DOM 说起修改页面内容要求: 页面上有个空的无序列表节点,用 <ul></ul> 表示,要往列表中插入 3 个 <li>,每个列表项的文本内容是列表项的插入顺序,取值 1, 2, 3,怎么用原生的 JS 实现这个需...
  • qq_31628337
  • qq_31628337
  • 2017-04-18 15:01
  • 210

移动端前端适配方案对比

最近抽空看了看移动端适配的一些文章,也结合自己的经验做一下总结以及对比。 那么,开始正题,首先说说到目前位置出现的一些关于移动端适配的技术方案: 通过媒体查询的方式即CSS3的meida queries以天猫首页为代表的 flex 弹性布局以淘宝首页为代表的...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-16 09:15
  • 1373

关于移动端适配的几个方法,快速构建响应式网站必备知识

随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面。 但是我们同样要维持pc端,因此难免会遇到许多麻烦。 而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要合理的判断,选择全适的方法; 第一种方法:整个页面宽高用px写死,让宽度自适应 ...
  • wushaoxion
  • wushaoxion
  • 2016-09-26 22:42
  • 3131

前端页面响应式布局 简单实现

找到了个网址  写的就是这个响应式布局的代码  复制粘贴到css 文件  就能实现等比例缩放功能 下面是网址       http://www.jiawin.com/response-type-layout...
  • qq_34963461
  • qq_34963461
  • 2017-01-13 11:07
  • 253
    个人资料
    • 访问:2350次
    • 积分:105
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档