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; /* 固定的高度，根據你的設計圖調整 */
}

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