css畫素與裝置畫素：二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考
a pixel is not a pixel is not a pixel
進行理解。
視口：移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為我們為頁面定義的用於瀏覽器渲染的大小。 可參考
a tale of two viewports
進行理解。
**查詢：找準斷點。
響應式布局：當上下文環境發生變化時可考慮變化布局來展現優雅。當元素脫離文件流絕對定位時，才是相對高度定義的。
響應式字型：font-face絕對會對你的站產生巨大的影響。當容器中定義字型單位為em時要注意繼承性，例如：當我們定義某個塊級元素的「font-size：1.5em; line-height: 2em;」時，line-height的實際行高為1.5em*2即3em。
文件宣告：文件宣告建議用html5的：，它指示瀏覽器關於頁面使用哪個 html 版本進行編寫的指令。同時需要定義文件的視口資訊，如：width=device-width告訴瀏覽器渲染該頁面的寬度等於裝置寬度，initial-scale=1告訴瀏覽器初始化縮放的比例1:1，user-scalable=no禁止使用者縮放頁面。
相容性測試:
除錯工具推薦chrome的模擬器加真機測試，更多關於debug的工具可以參考
debugging mobile web page
這篇文章。
總結：
移動端開啟了乙個時代，它不是虛無縹緲或者高不可攀的，它反而讓曾經被忽視的渲染方式及web標準等實質性的問題更加清晰，相較上述兩種思路，我們更傾向於各司其職思路清晰的第二種方案，我們可根據不同終端做不同的互動設計、視覺設計，研究不同的前端技術、使用者體驗，適合的才是更好的。做為前端工程師，讓我們理解原理，探索實踐，跨終端任重而道遠。
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...
移動端布局
移動端頁面基本上和web端區別不大 但要考慮到 移動端螢幕尺寸不大並且都是全屏布局 而且 螢幕尺寸都不一樣 所有不能使用網頁的固定尺寸來布局 需要使用百分比來布局 優點 移動端基本都相容h5 css3 所有可以放心的去使用css3的樣式來布局 移動端頁面一般都不大 所以標籤使用的並不多 相對乙個一面...