1 Native App vs Web App
2010年以后，在苹果和诸多Android厂商的强力推动下，智能手机得以迅速普及，越来越多的人使用智能手机上网，从而使得移动互联网成为大众瞩目的焦点。 

当前智能手机应用主要分为两大类：本地应用（native App）和Web应用（Web App）。
■ 本地应用主要指使用特定的编程语言直接基于手机操作系统开发应用，比如用Objective-C开发iOS应用，或者是使用Java开发Android应用。

本地应用能直接调用手机操作系统的所有功能，并且能充分地使用手机硬件（比如摄像头、传感器、话筒等），应用能实现的功能不受限制，并且响应迅速，用户体验好。它的缺点在于对开发者素质要求高，开发周期长，成本高。

■ Web应用主要使用手机内置的浏览器（或浏览器组件），直接从网站上提取网页并显示，其特点是具有跨平台特性（因为Android和iOS都有内置浏览器并且对HTML5特性支持较好），同时可以基于现有的网页进行改造，大大地降低开发成本。其缺点在于对网络依赖性强，只能调用手机功能集合中的一个子集，用户体验暂时还比不上Native App。

尽管现在native App还是占优势，但笔者认为Web App还是会渐有起色并最终与native App平起平坐，甚至可能会反客为主占据优势地位，主要原因有以下几点：
1.手机硬件进步飞快，目前Android手机装备四核CPU的己经很多，内存也越来越大，性能提升明显，这对于Web App来说是件好事。

2.通讯基础设施的改善是持续的，上网速度必然会持续提升，联通、移动、电信等巨头虽然会努力地想方设法地维持其垄断利润，但上网总体费用下降的大趋势是不会变的，迟早手机会像现在家庭的宽带一样，流量不再是需要考虑的问题。

3.与PC不一样，用户更换手机频繁，每当用户换一个新手机，或者是手机厂端主动推送手机操作系统的更新，用户都会得到一个新的浏览器，新的浏览器对HTML5的支持会更完善，并且随着手机硬件性能的提升，其运行Web应用的性能也会有相应提升。

4.Native App与Web App有相互融合的趋势，诸如PhoneGap之类的框架，己经使Web App能方便地调用手机的各种硬件功能，也有越来越多的本地应用通过内嵌一个Web浏览器组件，使用 Web App来完成部分功能。

5.不管怎么说，Web App总是有发展前景的，因此，掌握 Web App开发技术，也成为移动互联时代程序员必须关注的问题。

2 响应式移动Web设计原则
响应式Web设计（RWD，Responsive web design）是由Ethan Marcotte提出的一种移动Web开发模式，其目的是设计出这样的网页：用户不需要进行手势缩放、拖动就可以很方便地阅读网页内容和在网页间跳转，而且这种网页应该具有“自适应特性”，能在所有的移动设备上，不管其屏幕大小、硬件配置差异，都能得到相近的使用体验。

响应式Web设计是当前移动互联应用主流的开发模式。

当前主要通过以下三种手段实现响应式Web设计：

（1）CSS3 media queries

主要通过给CSS规则添加media属性实现。

比如以下这条规则声明：如果当前页面要打印，那么就不显示nav 元素。

再看一条规则：

这条规则说明，如果页面是通过屏幕显示，而且该屏幕宽度不超过568 像素，那么CSS 就会取消带.column 类的元素的浮动，让布局区块上下堆叠，且让该元素宽度为屏幕的96%，同时在屏幕上居中。

上述指定了设备屏幕大小的CSS规则，被称为“断点（breakpoint）”，同一个CSS文件中，可以包容多个断点，从而为不同的移动设备选择合适的CSS样式规则，获得满意的显示效果。

如果要通过媒体查询应用的CSS 规则非常多，那么就可以考虑使用<link >标签的media 属性设定条件，有选择地加载独立的样式表。

CSS3的媒体查询功能，可以适用于以下的“媒体类型（Media types）”：

■ all：匹配所有设备；
■ handled：匹配手持设备（小屏幕、单色、带宽有限）；
■ print：匹配分页媒体或打印预览模式下的屏幕；
■ screen：匹配彩色计算机屏幕；

其他媒体类型还有braille（盲文点字触觉反馈设备）、embossed（盲文分页打印机）、projection（投影仪）、speech（语音合成器）、tty（电话机屏幕等固定宽度字符栅格设备）和tv（电视机），目前基本用不上。

CSS3的媒体查询功能，能检测出移动设备的以下特性：
■ min-device-width 和max-device-width：匹配设备屏幕的尺寸；
■ min-width 和max-width：匹配视口的宽度，例如浏览器窗口宽度；
■ orientation（值为portrait 和landscape）：匹配设备是横屏还是竖屏。

可以看到，CSS 媒体查询的关键在于依据移动设备的特点选择合适的CSS规则，以达到理想的显示效果。

2）流式网格布局（Fluid-grid layouts）
当前PC都拥有大屏幕，因此针对PC浏览器设计的网页通常都使用多栏布局，但在手机这种小屏设备时，网页布局必须进行调整，通常采用单栏的设计方案，这可以通过前面介绍的媒体查询功能实现，但同时必须在CSS规则中使用em 或百分比等相对单位设定页面元素宽度，以让其能够随屏幕大小而缩放，这就是流式网格布局的含义。

我们可使用HTML 的<meta >标签通知手机浏览器不要缩放网页：

这样浏览器将按照移动设备屏幕宽度来显示网页，不需要用户使用手势来缩放查看网页了。当然前提是必须使用CSS媒体查询功能针对移动设备屏幕大小返回合适的网页。

Viewport被译为“视口”，你会在很多移动Web页面中看到它的身影。

（3）弹性图片与多媒体（Fluid images and media）
移动Web页面必须保证<image >与<video >元素呈现的内容再大也不会超过其容器的大小，从而让用户无需缩放也能看到完整的内容。这往往是通过提供不同分辨率的媒体素材实现的，比如给手机提供小图片，而给屏幕较大的平板电脑提供大像素图片。

（4） 用户设备嗅探（User-agent sniff）
手机浏览器在浏览移动Web网页时，会向Web服务器发出HTTP请求，其中包容一个名为“User-Agent”的HTTP Header，我们可以编写服务端程序解析它，从而知道用户所使用的移动设备的许多信息，从而能有针对性地返回适合于他的移动Web网页，这个技术称为“User-agent sniff”。

使用任何一种Web服务端技术，比如PHP，ASP.NET，JSP等都可以完成这一工作，事实上己经可以在网上找到现成的代码，比如访问http://detectmobilebrowsers.com/就可以找到这样的代码（图5）。


3 渐进增强与优雅降级

开发移动Web页面，主要有两种开发模式：

第一种称为“渐进增强（Progressive Enhancement）”，即先针对小屏手机开始设计，再针对平板，最后针对桌面版浏览器进行设计。

另一种称为“优雅降级（Graceful Degradation）”，即先针对功能最强的桌面版浏览器设计，然后再通过编写JavaScript检测代码，使用CSS3媒体查询等手段让手机也能正常访问。

当前主流的观点是应该“移动先行”，优先采用“渐进增强”方式。

四 小结
我在这篇文章给大家绘制了CSS这一技术领域的导航图，可以看到，在移动互联时代，掌握CSS的己经成为对开发者普遍的要求，希望我这张导航图能帮助大家更好地掌握CSS技术，有关移动Web开发，是一个很大的领域，以后有机会时，再给大家绘制一张新的技术导航图。

[本文作者：金旭亮]a