背景
在进行前端开发时，响应式布局已经成为了不可或缺的一部分，我们通常使用 CSS Reset 来重新定义网页的默认样式。然而，CSS Reset 可能会引入一些不必要的问题，如不同浏览器的不统一性等。为了解决这些问题，我们可以使用 viewport 单位来实现响应式布局。
viewport 简介
viewport 是浏览器的一个可视区域，通常指浏览器显示网页的区域大小。在移动设备上，viewport 大小可以通过缩放来调整，而在桌面设备上，viewport 大小通常是固定的。
width: 表示 viewport 宽度，可以设置为像素值，也可以设置为device-width。height: 表示 viewport 高度，可以设置为像素值，也可以设置为device-height。initial-scale: 表示页面首次展示时的缩放比例。minimum-scale: 表示页面的最小缩放比例。maximum-scale: 表示页面的最大缩放比例。user-scalable: 表示用户是否能够缩放页面。
使用 viewport 单位
在 CSS 中，我们可以使用 viewport 单位来定义元素的宽度和高度：
- vw: 表示 viewport 宽度的百分比，1vw 等于 1% 的 viewport 宽度。
- vh: 表示 viewport 高度的百分比，1vh 等于 1% 的 viewport 高度。
- vmin: 表示 viewport 宽度和高度中较小的那个的百分比。
- vmax: 表示 viewport 宽度和高度中较大的那个的百分比。
使用 viewport 单位可以使页面在不同尺寸的设备上保持一致的比例和样式，从而实现响应式布局。
示例代码
下面是一个基本的 CSS Reset，并使用 viewport 单位来实现一个简单的响应式布局：
-- -------------------- ---- -------
-- --- ----- --
--
------- --
-------- --
----------- -----------
-
-- ----- --
-----------
------ -----
---------- -------
------- - -----
-
------ ------ --- ----------- -------
-----------
------ -----
---------- -------
-
-这段代码中，我们首先对所有元素进行了 CSS Reset，然后定义了一个容器 .container，它的宽度是视口宽度的 90%，即容器的宽度是视口宽度的 90%。同时，我们也设置了一个最大宽度为 1000 像素。
在 @media 媒体查询中，我们重新定义了 .container 的宽度。当视口宽度大于等于 768 像素时，容器的宽度变为视口宽度的 80%，最大宽度变为 1200 像素。
总结
在做响应式布局时，viewport 单位是一个非常有用的工具。通过使用视口宽度、高度和响应式媒体查询，我们可以让页面在不同的设备上表现得更加美观和方便。希望这篇文章能够帮助你更好地理解并使用 viewport 单位来实现响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e41590f6b2d6eab3f6fd23