//設定瀏覽器核心開啟雙核模式
<meta name="renderer" content="webkit|ie-comp|ie-stand">
//設定瀏覽器預設核心
<meta name="renderer" content="webkit"> 
//設定瀏覽器支援最新的ie文件
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
//viewport是網頁預設的寬度和高度，網頁預設寬度等於螢幕寬度（width=device-width）,原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。對影象來說也是這樣。
 

例如：
//字型大小是頁面預設大小的100%，即16畫素。
body{font:normal 100% Helvetica,Arial,sans-serif;}

• 流動佈局
  流動佈局的含義是，各個區塊的位置都是浮動的，不是固定不變的。float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢位)，避免了水平滾動條的出現。

自適應網頁設計的核心，就是CSS3引入的MediaQuery模組
它可以自動檢測螢幕寬度，然後載入相應的css樣式檔案

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
//如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyScreen.css檔案。

<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
//如果螢幕寬度在400畫素到600畫素之間，則載入smallScreen.css檔案。
 

• 使用vh與rem
• 使用 lib-flexible外掛（這裡碰到個問題，我的專案中分別有pc和移動兩套程式碼，通過js判斷裝置進入不同的程式碼檔案，但是pc使用該外掛的情況下，移動端適配處理起來困難，建議只在單個埠專案開發的情況下使用）