1、在html頭部增加viewport標籤。
這段**支援chrome、firefox、ie9以上的瀏覽器，但不支援ie8以及低於ie8的瀏覽器。
2、在css檔案尾部增加針對不同螢幕解析度的規則。
使用**查詢實現：列如
@media screen and (max-width:640px)
3、布局寬度使用相對寬度。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小螢幕的寬度，實際上更麻煩。
4、頁面使用相對字型（非必要）
在html頁面上不要使用絕對字型（px），而要使用相對字型（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。
5、自適應（非必要）
img標籤的話，只需要設定 max-width: 100%;或width:100%; 語句為：img
背景：css載入的background-image自適應大小，使用css3實現的，新增如下語句：background-size:100% 100%;
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...