智能手机发展确实很迅速，像今年，我的大部分工作就都在移动端网页上。
再往前些年，看到的手机版/移动版网页，限制于浏览器与手机性能，2g网络速度等
网页设计无非是蓝、黑、白，界面单调，并且要尽可能的设计简单。
现在情况就大不相同了，软件上webkit内核浏览器大行其道，硬件突飞猛进，网速来说，4g正炒得火热。
下面就和大家分享一下我的一些移动端网页设计经验与心得。
1、分辨率
这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">
这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：
@media screen and (min-width: 640px){
.d1{background:#ccc;}
}
2、内容与缓存
虽才说到现在4g正炒得火热，但不可否认移动设备网络环境上的局限性，所以还是有必要对此做一些处理。
<html manifest="/mobile.manifest">
在html上添加manifest，其中文件格式内容如：
CACHE MANIFEST ##需要离线的内容 CACHE: Script/jquery.js Script/gameconfig.js Image/home.png Image/logo.png ##总是访问网络的内容 NETWORK: * ##访问A失败时访问B FALLBACK
按钮用到了 渐变+圆角+内阴影
.btn_red {
display: block;
line-height: 28px;
padding: 1px 0;
border: 1px solid #B81414;
border-radius: 2px;
background: #FF5A5A;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444));
overflow: hidden;
margin-top: 3px;
color: #fff;
box-shadow: 0px 1px 1px #FFB5B5 inset;
}
三角形 就是用border的颜色，改变颜色可以画出指向不同方向的三角形
.tip_t{
border-color: transparent transparent #bb0808 transparent;
border-style: solid;
border-width: 10px;
width: 0px;
height: 0px;
}
3、布局
手机端可视区域小，布局上不同于传统网页，需要充分利用有限的空间去展示信息。
4、其他与结语
原文：http://www.cnblogs.com/aivnfjgj/p/6274239.html