web移动端项目的搭建
1.文件目录：
asset放静态的文件如字体库font、字体图标库iconfont；
common 放置公共文件；
image 放置项目中用到的图片和图标；
css
- lib文件夹放置引入的外部插件的css文件，最好用压缩版的
- util文件夹 放置公司内部成员封装的插件和组件的css文件
- base.css 初始化的样式和定义的与内容无关的公共类
- common.css 跟项目内容相关的一些公用部分的样式列表与每个子页面同名的css文件
js
- lib文件夹放置引入的外部插件的js文件，最好用压缩版的
- util文件夹放置公司内部成员封装的插件和组件的js文件，最好用压缩版，未压缩的保留在同级的uncompress文件夹下
- common.js 项目中的一些公共方法与每个子页面同名的js文件
2.头部meta标签：
1. 页面自动调整到设备宽度，并禁止用户缩放页面
"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那块区域
width：设置viewport的宽度，为一个正整数，或字符串
initial-scale:默认缩放比例
minimum-scale:允许用户最小缩放比例
maximum-scale：允许用户最大缩放比例
user-scalable:是否允许用户手动缩放
2. 优先使用 IE 最新版本和 Chrome
"X-UA-Compatible" content="IE=edge,chrome=1" />3. 忽略页面中的数字识别为电话
"format-detection" content="telphone=no"/> 忽略Android平台对邮箱地址的识别
"format-detection" content="email=no"/>4. 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
"apple-mobile-app-capable" content="yes">5. 改变顶部状态条的颜色
"apple-mobile-app-status-bar-style" content="black">6. UC强制竖屏
"screen-orientation" content="portrait">QQ强制竖屏
"x5-orientation" content="320">7. 针对手持设备优化，主要是针对一些老的不支持viewport的浏览器，如黑莓
"HandheldFriendly" content="true">8. 微软的老式浏览器
"MobileOptimized" content="320">9. 设置页面不缓存
"pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">3.选择库Zepto.js：
zepto.js是针对移动端编写的，体积更小，效率更高，它的API几乎都仿照jQuery，但zepto远未成熟，开发过程中会遇到一些坑。因为zepto是模块化的，所以在下载的时候要注意。有了fx_methods这个模块，.show(),.hide()等方法才支持动画；touch模块是对触摸事件的支持，如tap事件。
自适应方案：
1).以rem为单位+百分比，px是相对显示器屏幕分辨率，手机分辨率种类颇多，用rem来做适配。rem是相对于根元素的字体大小的单位，rem只会相对html的值，一旦根节点html定义的font-size变化，那么整个网页中运用到的rem也会变化。为了让页面元素的尺寸能够在设备宽度变化的时候也跟这个变化，使用rem做单位。设置html{ font-size:62.5%} （10/16*100%），则1rem = 10px。
2).媒体查询，为不同屏幕大小的设备设置特定的样式
@ media screen and (min-width:375px) and (max-width:667px){
body{
Background:yellow;
}
}当页面宽度大于375px小于667px时执行下面的css