移动开发的小积累

浏览数：21 / 时间：2015年06月11日

由于公司的发展的需要，我被安排到移动站做前端，说起移动端的开发，对我来说追溯到我2011年的时候就有接触过，只不过那时候是做app开发，与现在的移动web开发有相当的区别。做移动开发也正合我今年的工作计划。从个方面来说，挺感谢自己的领导给我这个机会及对我的信任。

对于我们现在公司在移动web端的前后端开发都是从零开始，各方面的技术架构都不够系统全面，也正因为这样的一个公司，它能给每个做技术的人，一个自我学习提高及突破的平台。怎样去把不完善的东西健全完善起来，这就是你在这块的成长，公司业务也得到发展。

在前一个月中，为了赶在世界杯开幕前做一个与其相关的业务。公司专门成立了一个项目组加班加点的，确保在那个时间节点能把这个产品诞生出来。结果，我们按时完成了，不过也多少也些不完美。

在这个项目我个人学到了还蛮多东西的，虽然这些东西在大部分做过移动开发的同学眼中可能早于不是啥新技术啦。but对于我还是第一次开发移动web的新鸟来说，这些东西如甘泉雨露，对于做技术的能每天学到一点自己所不知晓的东西，就真的从内心的开心。下面让我讲讲我学到的一些比较肤浅的东西，大家看了觉得学到了知识的给赞，没学到的可拍砖，可扔iphone，我全收了。

我记得我做第一个移动页面的时候，发现我的做页面可以使用浏览器的默认触控手势进行页面的放大缩小，产品经理就不干了，死活不让页面有这个默认的缩放功能。没办呀，谁叫自己不是产品经理呗，自己只好google了。

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-

scalable=0" name="viewport">

结果就是在head中加上上述代码搞定。里面的一些设置属性大家英文比较好的一看就明白是啥意思，但是如果想对其更深刻的了解，大家就自行google，百度啦。

大家或多或少的知道一些浏览器会自带一个UI样式。我遇到一个比较突出的是iphone上submit按钮的默认风格，与我们设计师设计出来的不一样，这下设计师不高兴了。so为了搏妹子一笑，咱去找google先生。解决结果如下

.subtn{
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none
}

原来浏览器还有appearance这个属性，这个属性还相当的强大，只不过每个浏览器的默认风格差异很大。想了解更多的可阅读《使用CSS3的appearance属性改变元素的外观》了解更多。

下面这个情况做过移动web开发的都差不多遇到过，就是当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。但是，大部分情况下我是不需要这个高亮。解决方案：

.nav_a{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

　　这个关键在最后一个值0，意思是把颜色的alpha值为0。更多css3的高级属性

做网站当然就少不了使用icons。现在国外现在很流行把图标转换成web字体，国内部分网站也有用，虽然这有它的优势；但这些也有不足之处，比如图标必须是纯色之类的。我这里主要说的是用图片做icon的时候，图片变得很虚。有问题，就有解决的方法：

.m_okhqb_header .dib {
	width:35px;
	height:30px;
	background:url(http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_2.png) no-repeat 0 2px;
　　　　 background-size:50px auto;
}

上面的css重点在于sp_icos_2.png要比实际图片大一倍，再通过background-size去设置成其大小的一半，不过至于是不是一定要设置成其一半的大小，大家可以试试。

下面介绍三个相关布局的css属性，相当实用。

box-sizing 属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing有三个属性值content-box，border-box，inherit。这里我重点说下border-box。

当box-sizing的属性值为border-box时，表示通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。看下面的css代码：

.box {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
	width:200px;
        height:100px;
	float:left;
	padding:50px 50px 0;	
}

　　这段css表示类为box的元素的总的宽度为200px，左右内边距为100px，而这个元素的内容宽度问100px。不知道这样大家能否理解，不理解的话可以自己亲自试试。再不懂可点《CSS3 box-sizing 属性》了解更多。可能大家会问这个到底有什么作用，它在移动站的响应式布局时，时常不知晓宽度的时候是非常有作用。

box-flex 属性

box-flex 属性规定框的子元素是否可伸缩其尺寸。（可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title> 

box-flex </title>
	<style type="text/css">
		* {margn:0; padding:0;}
		.box {
			background:blue;
			width:600px;
			height:100px;
			display:-webkit-box;			
			display:-moz-box;			
			display:box;			
		}
		.box .p1 {
			-webkit-box-flex:1.0;
			-moz-box-flex:1.0;
			box-flex:1.0;
			background:yellow;
		}
		.box .p2 {
			-webkit-box-flex:2.0;
			-moz-box-flex:2.0;
			box-flex:2.0;
			background:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<p class="p1">p1</p>
		<p class="p2">p2</p>
	</div>
</body>
</html>

　　在使用这个css属性的时候，一定要在其父元素上(这里就是.box)设置display:box;当然现在浏览器还不支持这个属性，所有必须带上私有前缀（-webkit，-moz...）。这个属性现在移动端也是非常好用的，特别是布局是平分的时候。了解更多《CSS3 box-flex 属性》

display:table 与 display:table-cell

第一个表示的是：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

第二个表示的是：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

这两个结合起来用，可以元素类是表格的布局。在移动端上这两个应该使用的频率也是蛮高。

其中的布局作用，这里就不好怎么讲解，大家可以在实际的布局中尝试，才能体会其中的妙处。

好了，也写了这么多，这也就是我在过去的一个月中，学到的其中的一部分知识点，分享给大家，希望对刚接触移动web开发的同学有一点点小帮助。移动上的技术不比pc上的容易，相反，我觉得移动端上要学的还很多。极少成多，滴水石穿，希望自己能在移动这块有自己的建树。依然欢迎大家一起交流讨论，提高他人进步同时也是自己的进步！！！

移动开发的小积累,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

移动开发的小积累