CSS - 响应式设计视口

上一页
下一页

在响应式 Web 设计的上下文中，视口是浏览器用来呈现网页的虚拟区域。视口对于 Web 开发和创建适应各种设备和屏幕尺寸的响应式设计至关重要。

视口也可以指定为用户的网页可见区域，该区域由设备的屏幕大小和分辨率确定。在桌面上，视口是窗口的大小，不包括工具栏和不属于网页一部分的其他元素。在移动设备上，它是屏幕的大小。

CSS RWD 视口 - 类型

视口主要有两种类型，分别如下：

布局视口：它是浏览器用来显示网页的虚拟区域。布局视口是通过在 HTML head 部分添加 meta viewport 标签来控制的。 

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

在上面的语法中，content=“width=device-width 表示视口的宽度应设置为设备屏幕的宽度，initial-scale=1.0 用于设置初始缩放级别。

视觉视口：它表示当前在屏幕上可见的布局视口部分。可以在放大和缩小时更改视觉视口。

两个视口都是可变的，这意味着在加载页面后，可以更改两者的尺寸。

CSS RWD 视口 - 设置

如上所述，在布局视口中，可以使用 <meta> 标签来设置视口。在每个页面上使用 <meta> 标签。为浏览器提供控制页面尺寸和缩放的指令。

请参阅下面给出的示例，了解如何设置视口，并根据视口的大小，更改内容。更改视口大小以查看效果。


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	 	#card-container {
	 	 	 display: flex;
	 	 	 flex-direction: row;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 width: 500px;
	 	}
	 	
	 	@media screen and (max-width: 550px){
	 	 	 #card-container {
	 	 	 flex-direction: column
	 	 	 }
	 	}

	 	.card {
	 	 	 width: 100px;
	 	 	 height: 80px;
	 	 	 border: 1px solid black;
	 	 	 border-radius: 10px;
	 	 	 background-color: aquamarine;
	 	 	 text-align: center;
	 	 	 font-size: 4em;
	 	}
</style>
</head>
<body>
	 	<div id="card-container">
	 	<div class="card">
	 	 	 <span class="card-number">1</span>
	 	</div>
	 	<div class="card">
	 	 	 <span class="card-number">2</span>
	 	</div>
	 	<div class="card">
	 	 	 <span class="card-number">3</span>
	 	</div>
	 	</div>
</body>
</html>

在上面的示例中，添加了一个媒体查询，当屏幕尺寸减小到 550px 时，将 flex 的方向设置为列，否则 flex 方向在行中。

打印本页
上一页
下一页