一、字号设置
移动设备上运行的网站或应用程序，像素（px）不能作为尺寸单位，必须使用rem或%作为单位；
默认 1rem=16px
设置方法：
* {font-size:62.5%;}
16px * 62.5%=10px
例如之后当需要使用14px字号时，可设置 font-size:1.4rem; 即可
二、让Web布局更友好的适应于移动设备
Meta标签：
<meta name=" " content=" ">
name名称包括：
viewport：用来控制浏览器窗口的尺寸及缩放比例；
mobileOptimized：为Pocket IE设计，用于指定内容的宽度（单位为px）；当此标签存在时，浏览器强制将布局设为单列；
handheldFriendly：限制不应在移动设备上被缩放；该内容在移动设备上的值为true，非移动设备页面值为false；
apple-mobile-Web-app-capable：若此标签的content属性为"yes"则Web以全屏模式运行；
apple-mobile-Web-app-status-bar-style：全屏模式运行时，可以将移动设备上的状态栏改为"black"或"black-translucent"；
format-detection：此标签用于开关相关电话号码的自动侦测；content属性可为telephone=no，默认为telephone=yes；
Link标签：
<link rel=" " href=" ">
rel包括：apple-touch-startup-image：启动时显示的启动画面；
apple-touch-icon：指定一个图标将应用程序保存至主界面；
三、如何让Web布局自适应移动设备及非移动设备的浏览页面
方法1：在<head>中链接多个媒体查询样式表
<link rel="stylesheet" href="styles-320.css" media="only screen and (max-width:320px)">
<link rel="stylesheet" href="styles-480.css" media="only screen and (min-width:320px) and (max-width:480px)">
*该处需考虑的width应为设备的实际分辨率宽度（DPI），而非设备宽度；
方法2：使用meta标签中的viewport标签
<meta name="viewport" content="width=device-width">
viewport标签的content属性有：
width：宽度，默认值为980，范围为200~10000；
height：高度，默认值根据宽度及设备屏幕纵横比而定范围为223~10000；
initial-scale：启动时的缩放比例，可以在此之后再自行缩放；
minimum-scale：最小缩放值，默认值为0.25，范围为0~10；
maximum-scale：最大缩放值，默认值为1.6，范围为0~10；
user-scalable：开启或关闭用户的缩放权限，默认值为"yes"，设为"no"则不允许缩放；
device-width和device-height：定义输出设备的可见宽度及高度；
方法3：
<style>
@media (min-width:720px){
......
}
@media (max-width:480px){
......
}
</style>