5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。

使用viewport標簽

在HTML文檔頭部添加viewport標簽，設置meta屬性值為“width=device-width”，可以讓瀏覽器根據設備屏幕的寬度自動調整頁面的縮放比例，從而實現頁面自適應。

<meta 
	name="viewport" 
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, 
	maximum-scale=1.0, 
  user-scalable=no"/>

每個屬性的詳細介紹：

使用CSS3媒體查詢

媒體查詢可以根據設備屏幕的寬度和高度來匹配不同的樣式規則，從而實現響應式布局。通過設置不同的CSS樣式，可以讓頁面在不同的設備上呈現不同的布局和樣式。

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設備上應用以下樣式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設備上應用以下樣式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設備上應用以下樣式 */
  body {
    font-size: 18px;
  }
}

使用彈性布局

彈性布局可以根據設備屏幕的寬度自動調整元素的大小和位置，從而實現頁面自適應。通過設置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實現頁面的自適應性。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem單位

rem單位是相對于根元素(html元素)的字體大小來計算的單位，可以根據設備屏幕的字體大小自動調整元素的大小和位置，從而實現頁面自適應。通過設置根元素的字體大小，可以讓整個頁面的元素按照一定的比例進行縮放。

html {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設備上將根元素的字體大小設置為14px */
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設備上將根元素的字體大小設置為16px */
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設備上將根元素的字體大小設置為18px */
  html {
    font-size: 18px;
  }
}

rem是CSS3新增的一個相對單位（root em，根em）,使用rem為元素設定字體大小時，是相對大小，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

(其他)默認html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設為2rem。

通常情況下，為了便于計算數值則使用62.5%，即默認的10px作為基數。當然這個基數可以為任何數值，視具體情況而定。設置方法如下：

Html{font-size:62.5%(10/16*100%)}

具體不同屏幕下的規則定義，即基數的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數值，當然也可以通過js一次定義方法如下：

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據你設置的html的font-size屬性值做適當的變化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

使用vw、vh單位

vw和vh是根據設備的寬度和高度來決定的，設備的寬就是100vw，設備的高就是100vh，
你設置的50vw就是相當于設備寬度的50%，你設置的100vh就是相當于設備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設置100vh，那么基本上(設備的寬小于高的情況)就會超出你的屏幕X軸出現滾動條。如果你給元素高度設置100vw，那么就滿足不了你想要把這個元素鋪滿整個設備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。

使用方法：
1. 將設計圖放到PS里面，查看整個圖片的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意還是px單位哦）
3. 然后點擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當中了哦。（注意是vw和vh單位哦）

一般移動端的布局可分為三個部分，頭部->主體->tabbar的腳部。
所以我們可以把項目的外層這樣設置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 頭部部分 */
header {
	height: 10vh; /* 固定的高度，根據你的設計圖調整 */
}
/* 主體部分 */
main {
	flex: 1; /* 占據頁面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
	height: 10vh; /* 固定的高度，根據你的設計圖調整 */
}

使項目中的字體大小自適應：

機網頁制作是相對于傳統的電腦端網頁而言的，二者在設計和使用上并沒有太多的不同，主要是針對用戶瀏覽界面的大小而量身訂制的網頁。電腦端顯示器比較大，現在普及22英寸的顯示器了，主流網頁主體寬度一般不能少于1200像素，如果網頁的主體寬度過窄會造成瀏覽器兩邊空白過多，嚴重影響用戶視覺體驗。而手機網站頁面需要考慮不同尺寸的手機顯示器的問題，一般可以按照自適應的方式來解決。移動端與電腦的最大不同是顯示尺寸的問題，可以用布局單位像素和%來解決。

怎樣做手機端網頁才能確保專業、簡潔、大氣呢？

　　1、考慮使用網站二級域名

　　許多情況下手機的網站域名和PC端用的是同一個。過去往往為了圖方便使用目錄做為移動端頁面的展示，域名和電腦端是同一個。這樣的不利因素是一旦移動端網頁被收錄后用戶在電腦上訪問會展示手機瀏覽的效果，這樣有可以會造成圖片拉伸和變形。建議移動端使用二級域名。

　　2、合理應用HTML5+CCS3

　　H5頁面與傳統頁面最大的不同是交互和特效，這也是各大瀏覽器淘汰Flash的主要原因。合理使用特效有利于提升網站用戶體驗，過多使用一方面會讓設計實現變得的復雜，另一方面加大了網頁加載的壓力，所以說合理應用最重要，網頁要炫更要快。

　　3、改變以往的設計習慣

　　過去我們做電腦端網頁的時候要考慮主體網頁的寬度，一般不超過1200px，它的單位是像素，還要考慮網頁兩邊空間的視覺效果問題。移動端網頁的設計與電腦端略有不同，設計單位使用百分比%，這樣就可以兼容不同手機屏幕尺寸，不必考慮網頁兩邊留白的問題。只要設計符合www規則，無非就是從大視野變成了不視角的問題。

　　4、要考慮手機網頁加載快慢的問題

　　在設計方案手機版網站時，盡量避免的應用彈出窗口、flash、大文件等 ，載入這一類程序流程通常會較為用時耗總流量。主流瀏覽器已不再支持Flash了，所以盡量避免swf文件的調用。雖然現在5G時代了，但也要考慮網站的帶寬問題，你手機流量和速度可能會很好，網站使用過多資源而服務器對外帶寬又不高照樣會影響網頁打開速度。

　　5、重視不同手機效果調試

　　手機wap網站開發完成后盡可能使用不同品牌、不同屏幕尺寸、不同手機系統的移動端進行調試與檢驗，例如：安卓系統下的網頁效果與蘋果ios系統是不一樣的，個別網頁屬性不見得都能兼容，所以說要多看多對比，發現問題及時處理，做到不同環境下的視覺效果統一性。