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

你可能感兴趣的:(前端开发总结)