移动 Web 设计
一、字号设置
移动设备上运行的网站或应用程序，像素（px）不能作为尺寸单位，必须使用rem或%作为单位；
默认 1rem=16px
设置方法：
* {font-size:62.5%;}
16px * 62.5%=10px
例如之后当需要使用14px字号时，可设置 font-size:1.4rem; 即可
二、让Web布局更友好的适应于移动设备
1.Meta标签：
<meta name=" " content=" ">
name名称包括：
viewport：用来控制浏览器窗口的尺寸及缩放比例；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
width ---设置 layout viewport 的宽度，默认为980，范围为200~10000，使用“device-width”表示设备宽度
height ---设置layout viewport 的高度，默认值根据宽度及设备屏幕纵横比而定范围为223~10000，这个属性很少使用，使用“device-height”表示设备高度
initial-scale ---设置页面的初始缩放比例，为一个数字，可以带小数
maximum-scale ---允许用户的最大缩放值，默认值为1.6，范围为0~10，可以带小数
minimum-scale ---允许用户的最小缩放值，默认值为0.25，范围为0~10，可以带小数
user-scalable ---是否允许用户进行缩放，默认值为 yes，设为 no 则不允许缩放
target-densitydpi ---值可以为一个数值或 high-dpi(高像素密度) 、medium-dpi(中等像素密度)、low-dpi(低像素密度)、device-dpi(设备默认像素密度) 这几个字符串中的一个，该属性为安卓特有，但安卓已经决定要废弃这个属性了，避免使用
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：此标签用于开关是否自动侦测页面中的电话号码和邮箱；
<meta name="format-detection" content="email=no, telephone=no"/>
2.Link标签：
<link rel=" " href=" ">
rel包括：
apple-touch-startup-image：启动时显示的启动画面；
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
apple-touch-icon：当网站被保存至主屏幕时显示的图标；
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
<meta name="apple-mobile-web-app-title" content="标题"> 添加到主屏幕显示的标题
三、如何让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">
方法3：
<style>
@media (min-width:720px){
......
}
@media (max-width:480px){
......
}
</style>
