再配合**查詢@media就可以寫出適配各種手機端的頁面了。但是，為什麼就能夠了呢？
網上查了很多資料，反覆看了很多遍還是似懂非，知道看了知乎中乙個問題的解答，茅塞頓開。
自己不明白三個點，其中viewport，width，device-width分別代表什麼？
viewport瀏覽器的視窗，顯示網頁內容的區域。width指這個viewport即瀏覽器視窗寬度。
device-width裝置獨立畫素，邏輯畫素。聽著很抽象，那就按照字面理解，裝置的寬度，這個寬度就是我們css常寫px概念是一樣的。如電腦端的螢幕px寬度，手機的螢幕px寬度。它並不指像英吋，厘公尺這樣的物理尺寸。這些都是手機廠商設的，出廠就設定了。之前一直有誤區把device-width和物理尺寸對應起來，所以一直想不明白。
chrome：f12可以看到device-width
下面就簡單說說下自己對下面**的理解。
我們電腦上網一般都是全屏檢視網頁，這個全屏就是電腦的螢幕，電腦瀏覽器視窗=電腦螢幕區域。即viewport=device-width。但是手機瀏覽器視窗》手機螢幕區域。
以前手機瀏覽一些網頁都要通過手指調整檢視內容的區域。這樣使用者體驗就不好。為了改善這樣情況，手機手機廠家就給我想出了解決辦法：
name="viewport" content="width=device-width
這個設定意思就指讓手機瀏覽器的視窗等於手機螢幕大小。這樣一來在手機上檢視就跟我們在電腦上全屏看網頁一樣啦。
我們做手機端的網頁寬度就是根據這個device-width寫的。
見：網上看了很多資料，給的概念太多，建議看以下幾篇文章就差不多了，不懂得多看多想就通。
移動端viewport講解
viewport描述 也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域，這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...
移動端viewport的作用
我們知道，在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是乙個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫...
移動端viewport自適應屏
1，viewport viewport,是移動端特有。這是乙個虛擬的區域，承載網頁的。在預設情況下，移動裝置上的viewport都是大於瀏覽器可視區域的，這是因為移動裝置的解析度相對於pc來說都比較小，所以為了能在移動裝置上正常顯示為pc瀏覽器設計的 移動裝置上的瀏覽器都會把自己預設的viewpor...