网页转为html5,利用HTML5将现有网页转成mobile版（1）

mobile版本网站是现在比较热门的话题。今年，智能手机的出货量首次超过PC。越来越多的用户使用移动设备来上网，这意味着网站开发人员为他们的网站进行手机浏览器的优化变得越来越重要。

“mobile”战场对大部分开发者都是陌生的。许多人忽略了他们传统的网站会被手机用户访问。相反，网站设计的时候只考虑桌面浏览器。

开发一个能适应移动设备的html5rocks.com

作为练习，我们以html5rocks.com为例，当然我们不是专门开发一个mobile版本的网站，而是利用css制定一个mobile版本，让原网站能自动被浏览器识别并良好显示。

本文探讨的移动版本限于iOS和andrioid手机。

左边是PC版，右边是Mobile版

CSS Media Queries

能针对打印设备自动改变样式。CSS3则对媒体类型进行了扩展和优化。你能对媒体类型进行修改定制和扩展，就不需要特意为其它设备编写新样式表，只要在现有样式上改改就好了。

能设置media属性有screen width,device

width,orientation等。

屏幕尺寸定位

在下面的例子，phone.css将适用于手持设备或屏幕宽度<= 320px的设备。

media="handheld, only screen and (max-device-width: 320px)" href="phone.css&#