首先先了解html中這一句話的含義：
width - viewport-的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
然後在了解乙個單位rem
rem是css3新增的乙個相對單位（root em，根em）。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。（當然移動端布局不需要考慮這些相容的問題）
在了解一下手機螢幕解析度以及邏輯解析度（以iphone為參照）
移動端物理畫素和邏輯畫素 裝置
物理畫素
邏輯畫素
物理畫素/邏輯畫素
iphonex
1125*2436
375*812
3iphone6splus
1080 * 1920
1242 * 2208
414 * 736
3iphone6
750 * 1334
375 * 667
2iphone5
640*1136
320*568
2iphone4
640*960
320*480
2iphone 1g
320*480
320*480
1iphone 3g
320*480
320*480
1iphone 3gs
320*480
320*4801
螢幕大小相同，解析度越高，畫素點越小
今天先總結移動端的兩種布局方式就是寫法以及例項明天將會總結第三種方法；
首先第一種：
就是在head部分加上
上**都按照邏輯畫素點1:1的去寫**
按設計圖與手機尺寸比例去算出相同效果大小的px值；
第二種：
運用rem去解決自動適應螢幕的大小比例；
**如下：
文本文本文本文本文本文本文本文本文本文本文本文本文本
移動端布局
預設以寬度為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...