CSS 響應式設計視口

在響應式網頁設計的上下文中，**視口**是瀏覽器用來渲染網頁的一個虛擬區域。視口對於網頁開發和建立適應各種裝置和螢幕尺寸的響應式設計至關重要。

什麼是視口？

視口是使用者在網頁中可見的區域。它會因裝置而異，在手機上比在電腦螢幕上更小。在臺式機上，視口是視窗的大小，不包括工具欄和其他不是網頁一部分的元素。在移動裝置上，它是螢幕的大小。

視口型別

視口主要有兩種型別，如下所示

**佈局視口：**它是瀏覽器用來顯示網頁的虛擬區域。佈局視口可以透過在 HTML 頭部新增 meta viewport 標籤來控制。

**視覺視口：**它表示當前在螢幕上可見的佈局視口的一部分。視覺視口可以透過放大和縮小來更改。

這兩個視口都是可變的，這意味著可以在頁面載入後更改這兩個視口的尺寸。

設定視口

如上所述，我們可以使用 <meta> 標籤來控制視口寬度。您應該在所有網頁的頭部包含以下 <meta> 視口元素以確保響應性。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在上述語法中，“content = width=device-width:”將視口的寬度設定為與裝置螢幕寬度相同。“initial-scale = 1.0:”用於將初始縮放級別設定為 100%。

在下面的部分中，我們提供了沒有視口 meta 標籤的網頁示例，以及包含視口 meta 標籤的相同網頁示例。

帶有 Meta 標籤的示例

以下程式碼包含視口 meta 標籤，該標籤將佈局視口寬度設定為等於裝置的螢幕寬度。因此，頁面具有響應性並適應不同的螢幕尺寸。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Responsive Layout with Viewport Meta Tag</h1>
        <div class="content">
            <p>
                This layout adapts to the device screen width, 
                thanks to the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

沒有視口 Meta 標籤的示例

以下程式碼不包含視口 meta 標籤，因此整個視口在較小的螢幕上將不可見。在較小的螢幕上會出現水平滾動選項，從而降低使用者體驗。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Non-Responsive Layout Without Viewport Meta Tag</h1>
        <div class="content">
            <p>   
                This layout does not adapt to the device screen width, 
                because it lacks the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

與視口相關的 CSS 單位

在 CSS 中，我們可以根據視口尺寸指定元素的尺寸，例如佔用視口寬度的 50% 或視口高度的 100%。以下是常用的單位。

**vw（視口寬度）：**此單位基於視口寬度的 1%。例如，“width: 10vw”將等於視口總寬度的 10%。
**vh（視口高度）：**此單位基於視口高度的 1%。例如，“height: 50vh”將是視口高度的一半。
**vmin：**此單位採用視口寬度和高度之間的較小值。當您希望大小適應縱向和橫向方向時，這很有用。
**vmax：**此單位採用視口寬度和高度之間的較大值，這對於需要在較大視口中最大化空間的設計很有用。

列印頁面