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. 页面自动调整到设备宽度，并禁止用户缩放页面

    <meta name="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

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

3. 忽略页面中的数字识别为电话

    <meta name="format-detection" content="telphone=no"/>

  忽略Android平台对邮箱地址的识别

    <meta name="format-detection" content="email=no"/>

4. 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

    <meta name="apple-mobile-app-capable" content="yes">

5. 改变顶部状态条的颜色

    <meta name="apple-mobile-app-status-bar-style" content="black">

6. UC强制竖屏

    <meta name="screen-orientation" content="portrait">

  QQ强制竖屏

    <meta name="x5-orientation" content="320">

7. 针对手持设备优化，主要是针对一些老的不支持viewport的浏览器，如黑莓

    <meta name="HandheldFriendly" content="true">

8. 微软的老式浏览器

    <meta name="MobileOptimized" content="320">

9. 设置页面不缓存

    <meta http-equiv="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