视口单位

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 64 课，共 76 课。

在 CSS 中，视口单位是相对测量单位，其大小取决于浏览器视口（网页的可见区域）的尺寸。使用视口单位可以创建响应式设计，让元素和文本的大小与视口的宽度或高度成比例。视口单位特别适合创建流式布局、缩放文本，以及以适应不同屏幕尺寸的方式定位元素。

有四种视口单位：

vw（视口宽度）：表示视口宽度的 1%。例如，10vw 等于视口宽度的 10%。

vh（视口高度）：表示视口高度的 1%。例如，25vh 等于视口高度的 25%。

vmin（视口最小尺寸）：表示视口较小尺寸（宽度或高度）的 1%。例如，如果视口宽度大于高度，那么 5vmin 等于视口高度的 5%。

vmax（视口最大值）：表示视口较大尺寸（宽度或高度）的 1%。例如，如果视口的宽度大于高度，那么 8vmax 就等于视口宽度的 8%。

这是使用视口单位的基本语法：

selector {
    property: value;
}

selector：用于选中你想设置样式的 HTML 元素的 CSS 选择器。

property：你想设置的 CSS 属性（例如，width、height、font-size、margin、padding）。

value：包含视口单位的值（例如，50vw、75vh、10vmin、5vmax）。

例如：

.box {
    width: 50vw; /* 盒子的宽度将是视口宽度的 50% */
    height: 30vh; /* 盒子的高度将是视口高度的 30% */
}

在这个示例中，.box 元素的宽度为 50vw，高度为 30vh，因此它会根据视口的宽度和高度进行响应式调整。

挑战

简单

给你一个包含标题（<h1>）、段落（<p>）和区块（<div>）的 HTML 文档。你的任务是使用视口单位让这些元素具有响应性。请按以下步骤操作：

编写一条 CSS 规则，选择 <h1> 元素。将它的 font-size 设置为 6vw。
编写一条 CSS 规则，选择 <p> 元素。将它的 font-size 设置为 4vmin。
编写一条 CSS 规则，选择 <div> 元素。将它的 width 设置为 80vw，并将它的 height 设置为 50vh。

亲手试试

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>