数据结构
网络
关系数据库管理系统 (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 次查看
