資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學視口在視覺格式化模型中的作用
對於任何希望開發響應式網站的 Web 開發人員來說，瞭解視口在視覺格式化模型中的作用至關重要。視口是瀏覽器視窗或移動裝置螢幕上可見的區域。
在本教程中，我們將透過示例學習視口在視覺格式化模型中的作用。
什麼是視覺格式化模型？
視覺格式化模型允許 Web 瀏覽器決定如何在網頁上顯示 HTML 內容。它為內容提供視覺化。
視覺格式化模型根據視口區域、其他一些因素以及 CSS 屬性（如邊距、填充、邊框等）在網頁上顯示內容。
視口的作用
視口在視覺格式化模型中的主要作用是確定可見區域。當裝置螢幕尺寸發生變化時，可見區域也會發生變化，內容的視口也會隨之變化。
早期，網頁僅針對計算機制作。因此，網站並非響應式，但如今，網站有 60% 的流量來自移動裝置和平板電腦。因此，需要根據視口區域顯示網頁內容。
簡單來說，我們可以說視口用於確定可見區域並根據可見區域建立響應式網頁設計。
語法
使用者可以按照以下語法將視口新增到網站。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我們可以使用 <meta> 標籤將視口新增到網站。
屬性
name − 它採用 'viewport' 值來表示該標籤為視口。
content − 它設定網頁的寬度，'device-width' 值將寬度設定為等於螢幕寬度。
initial-scale − 它根據比例值放大或縮小網頁。
現在，讓我們透過示例瞭解視口在視覺格式化模型中的作用。
示例 1
在下面的示例中，我們在父 div 元素內建立了多個具有不同類名的 div 元素。此外，我們還使用 meta 標籤添加了視口。
在 CSS 中，我們設定父 div 的寬度並設定顯示方式。使用者可以更改瀏覽器視窗的大小，並觀察它如何根據瀏覽器的視口排列內容。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.first,
.second,
.third,
.fourth {
width: 230px;
height: 100px;
margin: 20px;
background-color: aqua;
border: 2px solid blue;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
<div class = "parent">
<div class = "first"> </div>
<div class = "second"> </div>
<div class = "third"> </div>
<div class = "fourth"> </div>
</div>
</body>
</html>
示例 2
在下面的示例中，我們有一個包含影像和文字 div 元素的容器 div 元素。我們添加了 CSS，以便影像佔用 50% 的空間，文字佔用 40% 的空間。
此外，我們使用媒體查詢為移動裝置設計網頁。使用者可以在移動裝置和臺式裝置上觀察輸出。此外，請觀察刪除以下程式碼中的視口後的輸出。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 90%;
margin: 0 auto;
border: 1px solid black;
padding: 10px;
display: flex;
}
.image {width: 50%; margin-right: 3%;}
.text {
width: 40%;
font-size: 1.5rem;
padding: 20px;
margin-left: 3%;
}
img {width: 100%; height: 300px;}
/* media query for mobile devices */
@media (max-width: 600px) {
.container {flex-direction: column;}
.image {width: 100%; margin-right: 0; margin-bottom: 20px;}
.text {width: 90%; margin-left: 0;}
}
</style>
</head>
<body>
<h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
<div class = "container">
<div class = "image">
<img src = "https://picsum.photos/seed/picsum/200/300" alt = "Random image">
</div>
<div class = "text">
The image is picked up from the picsum website. It allows us to get random image of specified dimensions. Change the viewport size of your browser to checkout the responsive design.
</div>
</div>
</body>
</html>
結論
我們學習了在開發網頁時視口的用法。它用於根據螢幕寬度獲取可見區域的大小並顯示內容。
如果我們使用媒體查詢使網站具有響應性而不使用視口 meta 標籤，則網頁將保持原樣，而不是變成響應式。
102 次檢視
