在手机端（移动端）进行静态网页的制作，主要考虑不同手机兼容性的问题，需要达到在不同类型的手机上，网页都能有一个良好的展示效果。为了达到这个效果，我们在写静态网页时需要注意几个问题。
1 viewport的使用
简单来讲，viewport就是移动设备上用来显示网页的那部分区域。由于不同型号的手机分辨率各不相同，我们需要对它进行统一设置，也就是把分辨率设为一个相同的值，这就用到viewport。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
这句话的意思是根据手机的屏幕尺寸设置一个viewport。这是响应式布局一个非常关键的设置。
参考资料http://www.cnblogs.com/2050/p/3877280.html
2 media的使用
media查询是css3的特性，用于判断移动设备，然后书写不同的样式，达到在不同的设备上有基本一致的显示效果。典型代码
@media screen and (max- 600px) and （min-width：320px） {
/*当屏幕尺寸小于600px并且大于320px时，应用下面的CSS样式*/
.abc{
background: #ccc;
}
}
参考资料http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html
3 百分比宽度的使用
配合浮动设置，对一行的多个元素的布局，用百分比来设置宽度，距离。需要把握的一点是总的宽度不要超过100%，不然会自动下调。
4 字体大小的处理
书写移动端网页，对于字体的处理是很重要的一项内容，有多个方法可以达到不同尺寸的手机显示合适的文字大小，暂时想到的有3个方法。
（1）用media特性，我们可以针对不同尺寸的手机，设置合适的字体大小。
（2）使用百分比设置文字大小（相对于自己的大小）。
（3）使用em为单位设置文字大小。
关于px与em的说明
参考资料http://www.cnblogs.com/CherryGhost/archive/2011/09/29/2195451.html
5 jQuery Mobile的使用
jQuery Mobile 是一个用于创建移动端web应用的的前端框架。使用jQuery Mobile可以节约开发时间，提高开发效率。jQuery Mobile依赖jQuery和jQuery UI，所以使用jQuery Mobile的时候，要先引入jQuery。这部分内容比较多，大家可以参考教程进行学习使用
参考资料http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
6 字体的处理
设置字体使用font-family。为了保证浏览效果，一般都要对font-family进行设置，但手机支持的中文字体很有限，比如比较常用的微软雅黑，手机是不支持的。关于字体的解决办法，一个是利用@font-face，将字体库放到服务器上，然后用户访问时，调用字体库，优点是可以使用所有字体，缺点是需要流量，访问速度也会变慢。如果对字体要求不是很高的话，中文字体我们可以不设置，就使用手机的默认字体。
我们在实践中使用默认字体，效果和使用微软雅黑没有明显区别，字体比较大的时候，会出现加粗的效果。如果想去掉加粗的效果，就需要在默认字体的基础上进行改进，设置font-weight: normal;，这样可以去掉粗体效果。
参考资料http://www.cnblogs.com/PeunZhang/p/3592096.html