很多時候我們開發的頁面需要自適應移動端和手機端，那麼如何實現呢？其實很簡單，看下面
（01）先看一個簡單的網頁代碼<html><head><meta charset="utf-8"/></head><body>hello 我不是自適應網頁</body></html>
（02）在PC電腦端的實現效果如圖
（03）在移動端的實現效果如圖
（04）很明顯，當在移動端上顯示時，它仍然是按照，pc端模式顯示的。所以字體非常小，都快看不清了，需要放大才行。好了現在我們來開始正式實現讓網頁自適應，不管在pc電腦端還是移動端都能正常的顯示。其實很簡單，我們只需要在網頁的在加一個meta標籤即可，如下<meta name="viewport" content="width=device-width,initial-scale=1.0">這個meta標籤的name為viewport，content為許多屬性集合，用逗號分隔。<html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"></head><body>hello 我不是自適應網頁</body></html>
（05）新代碼在pc端運行效果如圖所示（和沒添加name為viewport的meta標籤前一樣）：
（06）但是在手機端運行結果就不一樣了，如下圖所示：
（07）可以看到，其正常顯示了，也就是自動的適應了手機端和pc端。我們還可以坐下對比下沒加這個標籤前和加了後的顯示效果：
（08）現在是不是很明瞭了。現在我們來解析下，我們添加的這個meta標籤。首先，meta標籤存儲的是一些用户不可見，但是瀏覽器可見的一些元信息，一般以鍵值對的方式存儲。比如這個<meta name="viewport" content="width=device-width,initial-scale=1.0">name為鍵，鍵值為viewport。content為值，為"width=device-width,initial-scale=1.0"然後其中width=device-width 表示可視區域的寬度為設備寬度（手機或pc）initial-scale=1.0 表示頁面首次被顯示時，按實際尺寸顯示，無任何縮放（沒加這個代碼前，在移動端文字變小了就是因為被縮放了）width，initial-scale兩個屬性值寫了後就能達到初步自適應了。但是實際上還有幾個屬性我們也可以學習下。如下：1. user-scalable: no;//禁止用户縮放頁面2. maximum-scale=1.0, minimum-scale=1.0; //可視區域的最大和最小縮放級別都為實際尺寸，（設置以上兩點後，用户就不能縮放網頁了，同時網頁也將不用擔心被用户縮放變形的問題了）
好了，基本就這樣了，有問題可以在【有得】下面提問，沒問題點個贊，投個票什麼的吧，寫文章需要大家的鼓勵與支持
酷知知識幫
