瞭解到MobileWeb適配主要關注三個要素：字體、高寬間距、圖像（圖標、圖片）。
其中圖片需要注意：利用 css 將圖像限定在元素內（ img 圖片使用 max-width: 100% ，背景圖像使用 background-size ），佈局只針對元素進行。
字體、高寬間距的單位推薦用rem:
rem 默認寬度爲 視覺稿寬度 / 16
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
這裏不得不再多說一句關於meta的使用，適配mobileweb頁面其作用很大，如以下viewport模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 啓用 最新的IE和chrome模板 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 -->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!-- 啓用 WebApp 全屏模式ios -->
<meta content="yes" name="apple-mobile-web-app-capable">
<!-- 設置狀態欄的背景顏色（IOS） -->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 不識別電話及email -->
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!-- 百度禁止轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 添加到主屏後的標題（IOS） -->
<meta name="apple-mobile-web-app-title" content="標題">
<title>標題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>還有更多設置技巧請看：MobileWeb適配(二)。
