关键词：
一、目前移动端布局方法
两个基本规则：移动优先，设计初期就要考虑设计的页面如何多终端显示。渐进增强，充分发挥硬件设备的最大功能。
三个常用方法：
1）css3-media Query（最简单，最基本）
优点：解决了跨设备问题
缺点：兼容性代码多工作量大，加载速度慢
2）借助原生的js
优点：通过js控制页面的样式加载，通过js检测设备的属性， 很好的解决了兼容性问题。
缺点：书写原生的js，成本比较高，不推荐使用。
3）第三方开源框架
能够很好的兼容浏览器，提供各种插件和解决方案，方便敏捷开发。目前最好用的移动端html5框架，jquery mobile基于jquery框架；bootstrap属于css框架，有很好的布局系统和丰富的插件；sencha touch是一个比较重的移动开发框架，不适合便捷开发。
二、技术选型
Bootstrap如今是Github上最火的开源项目之一，这是一个用于前端开发的工具包，由Twitter前设计师Mark Otto和Jacob Thornton合作开发。
12列栅格化布局系统，丰富的组件，是目前移动web开发比较火的框架之一。
三、设计规范
1. 简化内容
一般的手机、平板电脑等移动装置，不易容纳下适合于个人电脑的庞大网页资讯，因此手机移动网页的首要重点，就是减少内容，不论是图片、文字或是影音。
请记住一个重点：只要将最重要的资讯放入移动版网页，就是最主要的准则，重要性较低的、读取需要时间的内容，则可以透过超链接，连回到正常的官方网站。
移动网站必须十分的重视内容简化这一点，一个塞满内容的移动网站无法获得网路客户的青睐。
2. 一栏滑动的最佳策略
大部分的移动装置，画面都不如桌上电脑那么大，尤其是阅读文字时更需要加以放大。即使智能手机都具有网页放大缩小功能，但是观看起来较为麻烦。
因此设计移动网页时，建议是能够以滑动屏幕方式阅读网站，因为滑动网页比起放大网页观看来得简单多了。
3. 导览功能大不同
手机网页与跟一般的网页不同的，在於当阅读文章到最后时，要回到最前头是麻烦的，因此设计网页的企业，除了减少卷动画面的机会外，也会加强导览的功能，让网页变得更容易于移动装置上阅读。导览设计的重点有：
1）只在首页的部份加入搜寻的功能 2）建立导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要 3）最后，「回到上一页」的按键除了首页以外，其余的页面都需要放置
4. 减少文字输入部分
目前手机大多没有实体的键盘，因此输入文字上会比起使用键盘麻烦得多。因此，减少使用者输入文字的机会，例如：个人的帐号、密码、搜寻内文、使用编辑器...等，都是移动网页要尽力避免的。设计的重点如下：
1）允许移动上网使用者储存输入的帐号密码资讯 2）输入的区块尽量加以放大 3）允许移动上网使用者，输入简易的密码，例如PIN数字密码
- 多种分辨率的手机网页版本
上图是天猫移动端测试的分辨率分级：
A级代表必须兼容
B级次之
C级可以不兼容
6. 触控屏幕与非触控屏幕设计
虽然今日触碰型的智能手机当道，但是仍有为数不少的传统手机，没有触碰的界面，使用的是传统的控制方向键做为导览的工具。例如：减少画面中超连结的数量，可以让选择连结的时候减少一些按钮的动作，或是加大文字以减少误击的问题。
此外更重要的是鼠标的原理跟触摸屏的原理有很大的差异，因此移动版的网页应该避免只有电脑鼠标才能做到的功能，举例来说：「下拉选单」的这一项功能，因为移动装置没有「鼠标座标」的设计，所以无法触发鼠标移动过去才会显示出来的选单。
7.性能要求 WAP业务的技术性能指标如下：
- 1）页面平均响应时间：在网络正常传输情况下小于 3秒。
- 2）忙时连接成功率应不小于 98%。
- 3）网络时延（指从 WAP GW PING服务器的环回时延）应不大于 100毫秒。
- 4）响应时延（指从 WAP GW发出业务请求到WAP GW接收业务响应的时延 应不大于500毫秒。
- 5）页面平均故障间隔时间（MTBF）：大于 10000小时。
- 6）页面平均故障恢复时间：小于 5分钟。
- 7）每秒处理的 WAP页面请求数：大于 200次。
- 8）平台应用服务器响应时间：在 2000 并发用户（假设每个用户每 10秒钟发送一个请求）的前提下响应时间为 1s。
- 9）数据库服务器响应时间：在所建库的 100万条记录中查询某条记录的搜索平均时长小于0.5s。
四、兼容性规范
- 手机浏览器兼容性测试结果概要
1.1 XHTML部分
大多数手机不支持的：
* 表单元素的“disable”属性部分手机不支持的：
* “button”标签
* “input[type=file]“标签
* “iframe”标签。
虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
少数手机不支持的：
* “select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。
1.2 CSS部分
大部分手机不支持的：
* “font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
* “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
* “font-style: italic;”：同上；
* “font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
* “white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
* “background-position”属性：但背景图片的其他属性设定是支持的；
* “position”属性；
* “overflow”属性；
* “display”属性；
* “min-height”和”min-weidth”属性；
部分手机不支持的：
* “height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
* “pading”属性
* “margin”属性：更高比例的手机不支持”margin”的负值。
少数手机不支持的：
* 少数手机对CSS完全不支持；
1.3 JAVASCRIPT部分
这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但没有测试过很复杂的脚本。
在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级（jquery可以更好的解决这一点）。
1.4 其他
部分手机不支持png8和png24（如：htc，一般是系统未集成该功能，因为png图片较大），所以尽量使用jpg和gif的图片（目前很少有手机不支持png）。
另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计。
部分手机对于超大图片，既不进行缩放，也不显示横下滚动条。
少数手机在打开超过20k的测试页面时，会显示内存不足。
五、总结说明
1.技术选型：bootstrap
2.设计规范：水平垂直布局，尽量减少图片的使用，涉及到输入的地，局域尽量要大。注意各区域边距的统一，字体大小，颜色的统一。
3.兼容性测试：响应式布局与响应式字体
4.性能优化：图片sprite的使用，css，js文件的压缩，优化加载速度。
移动端web框架（html5手机框架）
淘宝SUIMobile框架官网地址：http://m.sui.taobao.org/SUIMobile是一套基于Framework7开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到iOS6.0+和Android4.0+，非常适合开发跨平台WebApp。轻量的UI库SUIMobile非常轻... 查看详情
如何学习web前端开发？
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
移动端web开发响应式布局及bootstrap框架使用(代码片段)
文章目录响应式开发BootstrapBootstrap栅格系统响应式开发响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。响应式布局容器：响应式需要一个父级做为布局容器... 查看详情
web前端开发需要学些啥
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情
学习web前端开发，需要掌握哪些知识
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
web前端学习分哪些阶段？
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
初学者如何迅速学习web前端开发？
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
前端技术栈都有哪些
...作与样式设计实现，能够配合UI设计师进行项目开发。2、移动端页面制作与响应式实现讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以... 查看详情
web前端的内容多吗？好学不？
...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情
移动端web开发基础知识(代码片段)
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面移动端页面：单独制作移动... 查看详情
移动端web开发，click,touch,tap事件浅析
...双次点击。二、关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。处理方式 查看详情
移动端开发框架入门
移动端框架和传统框架的区别：移动框架在于快速开发一下项目，而手机端和pc端的适配主要是靠bootstrap来做的 zepto和mobile比较适合，在移动端有很多触摸事件，而在pc端则是很多的点击事件这些另外针对移动端的设备，比如... 查看详情
移动端页面开发流程
移动端页面布局一、移动端app分类1、NativeApp原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C2、HybridApp混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应... 查看详情
目前主流的移动web开发框架都有哪些
目前主流的移动WEB开发框架有哪些？Web框架也可以理解为B/S(Brouser/Server)框架，是一种基于浏览器载体的框架，包含前端、后端和数据库三个大的方向，各个方向的工具技术都不一样。现在主流的工具技术包含.NET、SqlServer、Bootstr... 查看详情
移动端web怎么循序渐进地开发一个移动端页面
1.移动页面开发基础1.1像素——什么是像素像素是Web页面布局的基础，那么到底什么才是一个像素呢？像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，Web前端开发领域，像素... 查看详情
web前端培训课程需要学习哪些方面的技术
...pt面向对象、JavaScriptDOM和BOM编程、jQuery框架。2、HTML5+CSS3+移动端核心：HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练。3、移动端：移动端核心、移动端适配、移动端特效。4、服务器端：服务器端开发、数据库操作... 查看详情