現在移動裝置越來越多，使用手機上網的人也越來越多，移動裝置也成為訪問網際網路的常見終端設定。以前我們在編寫管理系統的時候，客戶端只需要考慮pc機桌面裝置，現在則必須要考慮到移動終端裝置了。
移動終端裝置的螢幕解析度很多都不一樣，手機就分很多種大小的，然後還有一些平板電腦，如ipad,ipad迷你，等等，大小很難統一， 瀏覽器也各式各樣，這使得做移動裝置的客戶端介面有了一定的困難，總不不能每種尺寸的都做上一遍。
於是很多電商公司做了3g版，觸控螢幕版，普通版，電腦版等等。每種版本按大體的規則做了一遍。
電商**主要靠這些終端裝置來完成銷售，為了讓使用者使用各種設定都有良好的體驗，促進訂購，電商公司不惜分開做多個版本。
我們做企業管理軟體的，頁面展示的資訊不是那麼多時，可以將所有移動裝置的終端頁面做成標準的版本，就一套系統，然後根據螢幕的大小自適應，以後維護也就這一套。
自適應頁面的設計從開始就有很多需要注意的：
1. 頁面中關乎布局的元素都不設定絕對的寬和高，都按百分比來設定。
2. 字型也使用相對大小的字型 如：
body 字型大小事頁面預設大小的100%，即16畫素。
h2 h2標題的文字大小事預設字型大小的1.1倍。
3. 用div+css+浮動 來布局 各個盒子的位置用浮動的，不是固定不變的。 如：
.content
.sidebar
用百分比 + 浮動，當螢幕太窄，放不下兩個盒子的時候，後面的元素會自動移動到前面元素的下方，不會使得頁面產生橫向的滾動條。
4. 盡量不要使用絕對定位，即position:absolute的定位。
5. 根據瀏覽器的版本做一些css的處理
6. 根據螢幕的寬度載入相應的css檔案 如：
螢幕寬度小於400畫素，就載入tinyscree.css檔案；
螢幕寬度在400畫素 到 600畫素之間，就載入smallscreen.css檔案
@import url("tinyscreen.css") screen and (max-device-width: 400px);
在現有css檔案中載入。
7. css檔案中，根據解析度設定不同的css風格
@media screen and (max-device-width: 400px)
.sidebar
} 螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
@media screen and(min-width:400px)
.sidebar
} 螢幕大於400畫素，content佔65%，sidebar佔30%。
8. 自動縮放，自適應大小
如：img
9. 設定meta標籤 如：
viewport meta標籤告訴瀏覽器視口寬度等於裝置螢幕寬度，且不進行初始縮放。
當然程式設計師理想的狀態是做成一套，但往往事與願違，我們至少需要做成pc機桌面裝置一套，手機版觸控螢幕的一套，ipad3g版一套。在這三種的系統中再做一些各自小範圍的自適應。
網頁頁面的自適應
一.允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的？其實並不難。首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1...
自適應移動裝置頁面前端注意的問題
現在移動裝置越來越多，使用手機上網的人也越來越多，移動裝置也成為訪問網際網路的常見終端設定。以前我們在編寫管理系統的時候，客戶端只需要考慮pc機桌面裝置，現在則必須要考慮到移動終端裝置了。移動終端裝置的螢幕解析度很多都不一樣，手機就分很多種大小的，然後還有一些平板電腦，如ipad,ipad迷你，等等...
頁面自適應
原文 首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是 網頁寬度預設等於螢幕寬度 width device width 原始縮 放比例 initial scale 1 為1.0 即網頁初始大小佔螢幕面積的100 由於網頁會根據螢幕寬度調...