響應式網頁設計 - 視口
什么是視口？
視口（viewport）是用戶在網頁上的可見區域。
視口隨設備而異，在移動電話上會比在計算機屏幕上更小。
在平板電腦和手機之前，網頁僅設計為用于計算機屏幕，并且網頁擁有靜態設計和固定大小是很常見的。
然后，當我們開始使用平板電腦和手機上網時，固定大小的網頁太大了，無法適應視口。為了解決這個問題，這些設備上的瀏覽器會按比例縮小整個網頁以適合屏幕大小。
這并不是完美的！勉強是一種快速的修正。
設置視口
HTML5 引入了一種方法，使 Web 設計者可以通過 <meta> 標簽來控制視口。
您應該在所有網頁中包含以下 <meta> 視口元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
它為瀏覽器提供了關于如何控制頁面尺寸和縮放比例的指令。
width=device-width 部分將頁面的寬度設置為跟隨設備的屏幕寬度（視設備而定）。
當瀏覽器首次加載頁面時，initial-scale=1.0 部分設置初始縮放級別。
下面分別是不帶視口 meta 標簽的網頁、以及帶視口 meta 標簽的網頁的例子：
提示：如果您使用手機或平板電腦瀏覽這張頁面，則可以單擊下面的兩個鏈接以查看不同之處。
把內容調整到視口的大小
用戶習慣在臺式機和移動設備上垂直滾動網站，而不是水平滾動！
因此，如果迫使用戶水平滾動或縮小以查看整個網頁，則會導致不佳的用戶體驗。
還需要遵循的一些附加規則：
1. 請勿使用較大的固定寬度元素 - 例如，如果圖像的寬度大于視口的寬度，則可能導致視口水平滾動。請務必調整此內容以適合視口的寬度。
2. 不要讓內容依賴于特定的視口寬度來呈現好的效果 - 由于以 CSS 像素計的屏幕尺寸和寬度在設備之間變化很大，因此內容不應依賴于特定的視口寬度來呈現良好的效果。
3. 使用 CSS 媒體查詢為小屏幕和大屏幕應用不同的樣式 - 為頁面元素設置較大的 CSS 絕對寬度將導致該元素對于較小設備上的視口太寬。而是應該考慮使用相對寬度值，例如 width: 100%。另外，要小心使用較大的絕對定位值，這可能會導致元素滑落到小型設備的視口之外。
