1. 流式布局
    流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
  2. 视口viewport
  • viewport是一个虚拟区域，浏览器承载viewport，viewport承载网页。
  • viewport功能：
         1. width 设置宽度
            可以设置固定宽度为number，如320代表视口宽度为320px;
            也可以设置为device-width,视口宽度为当前设备的宽度
         2. height 设置高度
         3. initial-scale 设置默认的缩放比例
            可以设置缩放比例为number，如1.0表示不缩放
         4. user-scalable 设置是否允许用户自行缩放
            值为yes或1表示允许，为no或0表示不允许
         5. maximum-scale 设置最大缩放比例
         6. minimum-scale 设置最小缩放比例
    在<head>中设置标准适配方案
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  1. 不建议在移动端使用jquery，jquery做了很多桌面浏览器的兼容问题，特别是IE浏览器，但是移动端没有IE浏览器，这时就显得冗余。主流的浏览器还是谷歌(火狐移动端2016年停止更新)，建议使用H5的apizepto.js库(基于高版本浏览器开发)。
  2. 在移动端是百分比布局，无法准确计算内容容器的尺寸对所有元素使用box-sizing:border-box;能有效防止内容溢出，不出现滚动条。
*,*::before,*::after{
	padding:0;
	margin:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	/*清除点击高亮效果*/
	tap-highlight-color:transparent;
	-webkit-tap-highlight-color:transparent;
}
  1. 清除输入框的默认样式
input,textarea{
	border:none;
	/*（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
	outline:none;
	/*不允许改变输入框的尺寸*/
	resize:none;
	/*元素外观没有任何样式*/
	-webkit-appearance:none;
}
  1. 清除浮动
.clearFix::before,.clearFix::after{
	content:"";
	display:block;
	visibility:hidden;
	height:0;
	line-height:0;
	clear:both;
}
  1. 解决二倍图失真问题
    将一个40*40的图片，压缩成20*20的图片可以解决二倍图失真的问题。
    以一个400*400的雪碧图为例：
background:url("../images/sprites.png") no-repeat -60px -110px / 200px 200px;
  1. 对css3中的样式尽可能加前缀(-webkit等)，以适配不同浏览器。
  2. Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。
  3. iScroll / better-scroll采用了css3的transform动画模拟了惯性和弹性滚动的效果,效果和性能完美接近原生的滚动效果。
  4. art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。