viewport使用html中的meta标签来定义，是浏览器用来显示网页的”可视区域”，不含地址栏和书签页

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2026年2月25日 7:20 本文热度 171

viewport指的是浏览器用来显示网页的”可视区域”，不包含地址栏和书签页。

viewport决定了网页的基准宽度，有了这个概念，那么我们就可以做响应式布局，根据屏幕尺寸的大小来动态显示我们的内容，达到良好的体验。

那么什么是响应式布局？简单来说就是让网页自适应屏幕，可以适配各个屏幕尺寸的要求，达到编写一次网页，在各个尺寸下的屏幕都达到良好展示的目的。

如何定义

viewport使用html中的meta标签来定义

<!--定义了一个不允许用户缩放的视口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

上面的代码中，我们定义了一个不允许用户缩放的视口。关于不允许用户缩放这点实际中能不能达到效果？实际上是达不到效果的，因为很多浏览器都会忽略这个规则。

content内部是viewport的属性，常用的属性如下

属性	含义
width	设置viewport的宽度，为一个正整数或者字符串 “device-width”
initial-scale	控制页面首次加载时显示的缩放倍数。
minimum-scale	控制页面允许缩小的极限倍数。
maximum-scale	控制页面允许放大的极限倍数，必须大于或者等于minimum-scale。
user-scalable	控制是否允许用户放大缩小页面， yes-可以，默认值; no-不可以

新的尺寸单位

依据视口的概念，产生了两个新的尺寸单位，如下

• vw：视口宽度的百分之一
• vh：视口高度的百分之一

我们来看一个例子，用vw来定义body的字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>vw来定义body的字体大小</title>
    <style>
        body {
            font-size: 3vw;
        }
    </style>
</head>
<body>
     一个小学生在学习
</body>
</html>

打开控制台，当我们缩写或者放大view视口的时候，明显会发现文字会随着我们视口的大小进行等比例的变化。

我们知道css里面页可以用百分比表示尺寸，那么用vw/vh这些单位的地方是否可以用百分比代替？答案是不行的，因为百分比是相对于父元素的，父元素还是和全局视口有区别的。

那么能用这两个单位的CSS属性都有啥？很多，基本上所有有关尺寸的CSS属性都可以用这两个单位，但不是所有场景都适合，所以还是要在工作中多多总结。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/length

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/meta/name/viewport

阅读原文：原文链接

该文章在 2026/2/25 9:51:42 编辑过