这篇文章就当进入移动web开发的宣誓稿吧，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这潭水愈发的深了！不多言，进入主题。
我将从下面几个方面探讨移动web前端开发：分辨率、屏幕、手机浏览器、设计理念、响应式web开发。
分辨率
手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。我从两个方面进行思考：
1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。
2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。
屏幕
目前市场上的手机屏幕分为普通屏幕和视网膜屏幕两种。视网膜屏幕与普通屏幕最大的区别在于它的显示性能更优秀、图像更细腻。苹果公司从iphone4和new pad开始采用视网膜屏幕。
视网膜屏幕的评定指标是以像素密度超过300ppi为准。以iphone4为例，像素密度的计算方式如下：
1) 分辨率640:960 = 2:3
2) 勾股定理取对角线值，根号22+32 = 3.6
3) 像素密度 (960*3.6)/(3.5*3) = 326，其中3.5是屏幕尺寸，3是对应于960的最终值。计算过程中有误差，不必太在意。
视网膜屏幕的出现又带来了一个新的概念：“设备像素”。设备像素是要跟css像素做区分的。有关这方面的研究，您可以参考张鑫旭的这篇文章《视网膜New iPad与普通分辨率iPad页面的兼容处理》。里面的阐述很细致，我从中受益匪浅。
手机浏览器
浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器有：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。
设计理念（3S原则）
3S原则是指：Simple、Small、Speedy。这是国外一位大牛总结的，可以参见《Mobile Web Design: Best Practices》。对这三点，我深表认同。想说的是Speedy严格意义上应该算是结果，而不能归为原则。Web设计方面，我一直崇尚简约风格：便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等，当做到了这些，相信网站会变得Speedy。
移动web开发应该把手机的固有特性优先考虑。首先，手机屏幕相比桌面屏幕很小，所以满屏可显示的内容不多，这就要求我们在页面设计的时候选择好适当的字号，还得考虑文档内容的优先次序，把重要内容靠前显示；其次，手机的交互方式让我们得去重新考虑页面元素的设计。桌面web以鼠标操作为主，这样可操作的范围很精确，移动web以触控操作为主，手指的操作范围比较宽泛，反映在页面上，我以按钮为例，对于小屏幕低分辨率的手机来说，可以把按钮设置为.button{display:block;}，而对于大屏幕高分辨率的手机，可以设置为.button{display:inline-block;}，这是按钮。对于链接列表，要设置适当的行高，避免可点击的范围太小而操作失误；最后，图片。手机开发应尽量避免图片的使用，像圆角、阴影、渐变等以前在桌面不好实现的情况，在手机开发上已经不存在了，完全可以采用css3来实现，所以设计师在设计psd效果图的时候，就把效果做出来，但切图的时候就不必给出。
我觉得，所有的设计理念都是为了提升用户体验而提出的，当我们的目标群确定下来之后，如何提升用户体验，便是我们设计的出发点。
响应式web开发
这不是一项开创性的技术变革，但当我了解它之后还是觉得伊森·马科特很了不起。简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：
1) 准备工作：
a) 插件安装：window resize。您可以通过以下链接https://chrome.google.com/webstore/search-extensions/window%20resize下载安装，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视口的大小提示。截图如下：
b) 编辑器安装：subline Text2（支持html5，安装css3扩展失败）、topStyle5（支持css3）。
c) 弄清视口和屏幕的区别。视口是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视口宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。
d) 响应式设计创意网站收集：http://mediaqueri.es。这里有很多响应式Web设计的网站，供您参考和学习。
2) 征途ING：
e) 响应式web设计之媒体查询：
为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：
@media screen and (max-width:960px){}
大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。
f) 响应式web设计之流式布局：
流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。
g) 响应式web设计之液态图片：
要实现液态图片，只需加入如下代码：img{max-width:100%;}
响应式web开发并不会很难，只是以前一个页面只需要美工给出一张效果图，现在要给出两张以上，这样一来，工作量相应地增加了许多。建议大家先有流式布局的思想，减少层级的嵌套。我会在文章末尾贴上自己做的一个测试页面，大家可以看看，页面来源于http://2011.dconstruct.org/，由于时间原因，一些细节没法处理得很到位，同时对于低版本的浏览器的处
理解NodeList及其近亲NamedNodeMap和HTMLCollection，是从整体上透彻理解DOM的关键所在，这三个集合都是“动态的”，换句话说，每当文档结构发生变化时，他们都会得到更新。因此，他们始终存着最新，最准确的信息。从本质上说，所有NodeList对象都是访问DOM文档时实时运行的查询。例如下列代码会导致无限的循环：
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0;i<divObj.length;i++){
var d=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
首先取得页面中的所有div，由于这个集合（divObj）是“动态的”，因此只要有新的div插入到页面中，divObj都会添加这个新添加的div。也就是说，只要访问divObj，都会重新查询一次，重新更新一下divObj。所以，上面的代码，会出现死循环，因为每次循环的时候都插入了一个新的div，而每次循环都要对条件i<divObj.length求值，意味着会运行取得的所有<div>的查询。
如果想要迭代一个NodeList，最好是使用length属性初始化第二个变量，然后将迭代器与该变量比较。如下代码所示：
window.onload=function(){
var divObj=document.getElementsByTagName('div');
for(var i=0,len=divObj.length;i<len;i++){
var d=document.createElement("div");
document.body.appendChild(d);
}
}
</script>
这个例子中初始化了第二个变量(len)。由于len中保存着对divObj.length的在循环开始时的一个快照，因此就会避免上个例子的死循环。
总结：一般来说，应该尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一基于文档的查询。所以，可以考虑将从NodeList中取到的值缓存起来，如例子二所示！
本文链接
各属性参照area区域图，新增属性如下
dataLabels中新增的属性：
参数
描述
默认值
xHigh
最高的数据标签相对于点值的x偏移量
0.0
xLow
最低的数据标签相对于点值的x偏移量
0.0
yHigh
最高的数据标签相对于点值的y偏移量
-6.0
yLow
最低的数据标签相对于点值的y偏移量
16.0
2.areaspline区域曲线图
各属性参照area区域图
3.areasplinerange参照区域排列图arearange
4.bar 条状图未详细描述的，参照区域图
参数
描述
默认值
allowPointSelect
是否允许通过点击标签而选中标签
false
animation
当一个序列不显示时，是否显示动画
true
borderColor
每个柱状和条状的边框颜色
#FFFFFF
borderRadius
每个柱状和条状的边框圆角半径
0.0
borderWidth
每个柱状或条状的边框的宽度
1.0
color
主要颜色或者是序列颜色
null
colorByPoint
自动从options.colors数组中计算点颜色时，这个选项决定图表应该接受每一个序列的颜色还是接受每一个点的颜色
false
cropThreshold
处理阈值
50.0
cursor
光标
null
dataLabels
数据标签。参见区域图二级标题datalabels
enableMouseTracking
启用或禁用鼠标跟踪一个特定的序列
true
events
事件，参见区域图二级标题events