什麼是視域？
視口是一個網頁的用戶的可見區域。
視口與設備而變化，並且將在手機上比在計算機屏幕上小。
平板電腦和手機之前，網頁被設計只為計算機屏幕，它是常見的網頁具有靜態設計和固定尺寸。
然後，當我們開始使用衝浪平板電腦和手機互聯網，固定大小的網頁過大，以適應視口。 為了解決這個問題，瀏覽器縮小整個網頁以適合屏幕在這些設備上。
這不是完美的！ 但是，速戰速決。
設置視口
HTML5引入了一個方法，讓網頁設計師採取控制在視口中，通過<meta>標記。
你應該包括以下<meta>視區所有網頁元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一個<meta>視元素對如何控制頁面的尺寸和縮放瀏覽器的說明。
的width=device-width部分設置頁面的寬度跟隨設備的屏幕寬度（這將取決於在設備上）。
該initial-scale=1.0部分設置當頁面首先被瀏覽器加載的初始放大級。
這裡是一個網頁，而不視meta標籤，並與視口元標記同一網頁的例子：
提示：如果你正在瀏覽此頁面用手機或平板電腦，則可以在兩個鏈接點擊查看區別。
大小內容到視
用戶習慣於台式機和移動設備上的垂直滾動網站 - 而不是水平！
因此，如果用戶不得不水平滾動，或縮小，看到整個網頁，它會導致糟糕的用戶體驗。
一些額外的規律可循：
1.不要使用大固定寬度的元素-例如，如果圖像是在寬度小於視它可能會導致視口水平滾動顯示更寬。 記住要調整這個內容，以適應視口的寬度內。
2.不要讓內容依賴於特定的視口寬度呈現良好 -由於屏幕尺寸以及寬度CSS像素的設備之間有很大的不同，內容不應該依賴一個特定的視口寬度來呈現良好。
3.使用CSS媒體查詢，應用不同的造型為小型和大屏幕 -設置絕對大的CSS寬度的頁面元素，將導致元件也無法滿足一個較小的設備上的視口。 相反，考慮使用相對寬度值，如寬度：100％。 此外，要小心使用大絕對定位的值。 這可能會導致該元素添加到視區之外落在小型設備。