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

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

適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內容，本文給大家講講手機移動端自適應視圖。

Axure 8 自帶自適應功能，可以自適應電腦、平板、手機等不同大小的屏幕。

要完成手機屏幕的適配，需要做兩個地方的設置，一個是頁面自適應，一個是手機自適應。

頁面自適應

那我們先聊頁面自適應屬性，頁面自適應屬性可以通過菜單欄“項目-自適應視圖”中配置。自適應視圖的意思是，瀏覽器寬度、高度不同時，就顯示條件匹配的視圖頁面內容，如電腦有些屏幕寬度為1920px、1280px等，手機屏幕寬度為375px。

在不同的屏幕寬度上，瀏覽器默認寬度則不同，或者你在電腦屏幕上瘋狂拖拽瀏覽器窗口大小，瀏覽器則會根據寬度切換到該條件的視圖進行顯示。

當然，如果你只做了一種視圖，那么不管你如何瘋狂拖拽，網頁內容是不會變化的，你會看見的是多出了縱向滾動條或者橫向滾動條，僅此而已。

簡單針對自適應視圖設置中的幾個屬性進行解釋：

預設：系統預設尺寸大小，可以快速填充后面幾項設置數據。

名稱：就是給視圖取個名字。

條件：觸發該自適應視圖的條件，瀏覽器窗口≥某寬度或≤某寬度。

寬：設置觸發自適應視圖寬度，如瀏覽器窗口小于1280px時，顯示該視圖的頁面內容，手機我設置的寬度為500px，因為目前有些大屏手機，其實邏輯像素已經接近500px了，所以保險起見，設置小于500px則顯示手機視圖。

高：一般不設置此項，留空，原理與寬度一個意思。

繼承自：頁面中的默認元素繼承自哪個視圖，繼承的元素可刪除，然后會在原來的視圖依然存在。

特別解釋一下“最大顯示分辨率”，意思是超過最大的顯示分辨率的屏幕，一律按照此視圖內容顯示網頁內容。

自適應視圖設置好后，就可以在不同大小頁面去設計網頁內容了。

生成HTML時，需要在菜單”發布-生成原型文件”的“自適應視圖”中勾選自適應視圖。

手機自適應

聊完頁面自適應，再來聊聊手機自適應。

手機自適應在菜單”發布-生成原型文件”的“手機/移動設備”中進行設置，這里設置的是在手機網頁中如何完美顯示的問題。

如果你不設置，那么可能你手機網頁顯示了網頁內容，然后兩邊寬度留白很多，或者顯示不完網頁內容，因為你在自適應視圖中設計的寬度可能是375px，可能是414px寬度。但是手機的屏幕尺寸種類非常多，設計尺寸并不能完全適應所有手機屏幕。

那么為了不管哪種寬度，在手機網頁上都需要滿屏鋪滿網頁才更美觀，這里的設置就是干這事兒的。

簡單針對手機自適應設置中的幾個屬性進行解釋：

包含視圖接口標記：勾選后，才會啟用手機網頁自適應屏幕大小。

寬度：【重要設置】此處寬度填寫在手機的自適應視圖中，設計圖的基準尺寸，我使用的375px（iPhone 6s）基準進行設計的，所以這里我填寫的是375的寬度。

高度：這里留空，無需填寫。

初始比例：這里留空，無需填寫，我試了試，這里不填寫默認比例為1。

最小比例：【重要設置】這項作用是當用戶使用比設計圖更小的手機瀏覽網頁時，可以等比縮放到手機屏幕寬度，這里設置的是最小值，我設置的0.5，足夠使用了。

最大比例：【重要設置】原理與最小比例相同，使用比設計圖更大的手機屏幕瀏覽網頁時，自動等比放大到手機屏幕寬度，這里我設置的3，目前主流手機的最大屏幕寬度邏輯像素為480，設置3倍已足夠使用。

用戶可調節：填寫no即可。

防止垂直頁面滾動（受阻彈性滾動）：這項我試了幾次，沒明白有什么影響，可選可不選，大家也可以自己試試，如果知道什么意思，可以留言說一下。

自動檢測和鏈接電話號碼（iOS)：在iOS中，可以自動檢測出電話號碼，點擊后，可以撥打電話，可選可不選，根據自己情況來吧。

主屏幕圖標：主要是把網頁設置到主屏幕時，顯示的圖標。

iOS屏幕啟動畫面：網頁放到桌面，打開后的啟動畫面，不多解釋，不懂的，要拖出去打。

隱藏瀏覽器導航（當從iOS主屏幕啟動時）：iOS打開放到桌面的網頁，不會顯示瀏覽器的導航欄和工具欄，比較適合預覽APP應用的效果，勾上就行。

iOS狀態欄樣式：default（白底黑字兒），black（黑底白字兒），black（半透明的黑底白字兒)

沒有具體的操作步驟，不過我想你看懂了這兩處設置的每項參數含義，那么你已經學會了如何去做自適應網頁和手機屏幕自適應了。

福利：給大家一個Axure網站模板，已經配置好頁面自適應與手機自適應，大家可以免費下載研究。

好了，聊完了，再見！

作者：世界是棵樹，微信公眾號：世界是棵樹

本文由 @世界是棵樹 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

PC端進行網頁制作時，經常使用固定像素并且內容居中的網頁布局，為了適應小屏幕的設備，在移動設備和跨平臺(響應式)網頁開發過程中，多數使用流式布局，下面我們就對流式布局進行詳細介紹。

流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度，也稱百分比自適應的布局。 流式布局實現方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標元素寬度/父盒子寬度=百分數寬度 下面通過一個案例來演示固定布局如何轉換為百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局轉換為百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。

可以嘗試改變瀏覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。

下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新頁面，縮小瀏覽器，頁面按百分比隨瀏覽器逐漸縮小，顯示完整，頁面效果如下圖所示：