先看乙個簡單的網頁**
hello 我不是自適應網頁
在pc電腦端的實現效果如圖
在移動端的實現效果如圖
很明顯，當在移動端上顯示時，它仍然是按照，pc端模式顯示的。
所以字型非常小，都快看不清了，需要放大才行。
好了現在我們來開始正式實現讓網頁自適應，不管在pc電腦端還是移動端都能正常的顯示。
其實很簡單，我們只需要在網頁的在加乙個meta標籤即可，如下
這個meta標籤的name為viewport，content為許多屬性集合，用逗號分隔。
hello 我不是自適應網頁
新**在pc端執行效果如圖所示（和沒新增name為viewport的meta標籤前一樣）：
但是在手機端執行結果就不一樣了，如下圖所示：
可以看到，其正常顯示了，也就是自動的適應了手機端和pc端。
我們還可以坐下對比下沒加這個標籤前和加了後的顯示效果：
現在是不是很明了了。
現在我們來解析下，我們新增的這個meta標籤。
首先，meta標籤儲存的是一些使用者不可見，但是瀏覽器可見的一些元資訊，一般以鍵值對的方式儲存。
比如這個
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; //可視區域的最大和最小縮放級別都為實際尺寸，
（設定以上兩點後，使用者就不能縮放網頁了，同時網頁也將不用擔心被使用者縮放變形的問題了）
如何使網頁自動適配手機端
網頁自適應手機端的方式有兩種 1.pc端的設計與手機端相差不大，利用 media 查詢 調整百分比 2.pc端與手機端的設計分離，利用判斷裝置的方式做301跳轉 下面就結合源 講一講如何實際實現這兩種方案 第一步 在html 中新增如下 第二步 方案一 設定pc端內容區域width 1100px，新...
手機端rem如何適配 rem詳解及網頁自適應
什麼是rem 在我看來，rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了，就不用什麼 查詢那些的。我們的設計圖往往寬度是640或者其他尺寸的，不過我建議是用這個尺寸，以640為基準，以...
如何製作手機自適應網頁
1.開啟你需要製作手機網頁的html或者php等等網頁原始碼檔案。在之間加入meta標籤。2.向瀏覽器宣告該網頁為移動裝置自適應網頁的meta標籤為 3.將以上標籤加入之後儲存，再用手機開啟即是自適應網頁了。這裡介紹一種柵格系統 該系統可以根據手機大小，自動調整布局 具體參見 col md 1 co...