最近一個項目做的是微信端，因為之前沒接觸過一直以為移動端的自適應都是用某個插件，然后里面是分開各種比例的最大多少最少多少，然后里面封裝了各種的<p>值多大等等。
不過結果卻出乎所料的簡單。下面將以一個寬為640px的手機分辨率為例，分步解釋從一個普通web到移動端的轉變（此處只說增/改部分）。
第一步：標准設定
（1）在html標簽里面加入字體設定。
html{font: 20px/1.5 微軟雅黑, Tahoma, Helvetica, Arial, sans-serif;}
注意：這里的font設置是20px；即相當於指定了1em為20px。
（2）在body標簽里面加入標准設定。
body{width: 100%;}
這個的作用是為了讓body默認100%占滿整個屏幕。
此外如果還有用到表格之類的需要占滿整個屏幕的其他元素，也需要加上width:100%;這一句
（3）在.html文件的<head></head>標簽里面加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta> 元素可提供有關頁面的元信息，必須的屬性content定義了與 http-equiv 或 name 屬性相關的元信息，http-equiv屬性把 content 屬性關聯到 HTTP 頭部。
第二步：值轉換
值的轉換分為兩種，一種是字體，另一種是定位。
（1）字體
字體的轉換對應第一步的（1），由font：20px可推算出 22px就是1.1em，24px就是1.2em，以此類推。舉例：
.releaseTime{ font-size: 1.1em;
//此處代表字體大小為22px;
}
（2）定位
定位包括width、height、margin、padding、line-height等等。
根據上文提到的假設手機是640px，在平時所做的width：30px；的基礎上，用30（px）÷640（px）× 100%，所算得的值就是作為新的值。
.example{ width: 46.8%;
//此處代表width: 300px; padding-left: 3.1%;
//此處代表paading-left:20px; }
以上為css部分。
第三步：js對移動端的兼容
js的使用，是為了更改頭文件里面的<meta>，具體代碼如下：
var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); // andriod 2.3 if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); // andriod 2.3以上 }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } // 其他系統 } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } // <!--移動端版本兼容 end -->
end
by 豆腐
2015-03-22