Media Query 断点、vmin、vmax、vh、viewport 之间的关系

什么是 Media Query 断点？

Media Query 就是媒体查询，是 CSS 的一个强大的功能，可以根据设备的不同特征（例如设备宽度、高度、屏幕比例、颜色等等）来自适应的改变样式表的呈现。而 Media Query 断点就是指，在哪一个设备特征值的范围内，我们需要应用哪种样式。

例如，我们可以使用 Media Query 断点来实现响应式设计。当页面在不同宽度的屏幕上打开时，我们可以为不同的宽度范围设置不同的样式，以适应不同的设备。

什么是 vmin 和 vmax？

vmin 和 vmax 是相对于视口大小的单位。其中，vmin 表示视口宽度和高度中最小值的百分之一，vmax 表示视口宽度和高度中最大值的百分之一。

例如，在宽度为 500px，高度为 1000px 的视口中，1vmin 的值为 5px，1vmax 的值为 10px（500px 和 1000px 中较大的一个是 100vmax，较小的一个是 100vmin，然后再除以 100 得到 1vmax 和 1vmin）。

什么是 vh？

vh 是一个相对于视口高度的单位。例如，如果你的 viewport 的高度是 1000px，那么 1vh 就是 10px。

可以使用 vh 单位来实现一些相对于视口高度的布局效果，例如设定一个元素的高度为 50vh，就可以让它占据整个视口一半的高度。

Media Query 断点和 vmin/vmax/vh 的关系

Media Query 断点和 vmin/vmax/vh 其实都是为了实现响应式设计而存在的。Media Query 断点是根据设备特征值来自适应的改变样式，而 vmin/vmax/vh 则是和设备无关的，是相对于视口大小的单位。

它们之间的关系如下：

• 通过设置不同的 Media Query 断点，可以根据不同的设备特征值来改变样式；
• 通过使用 vmin/vmax/vh，可以使元素的尺寸相对于视口大小进行调整，从而实现响应式布局。

综上所述，Media Query 断点和 vmin/vmax/vh 是可以相互配合使用的，以实现更加灵活和优雅的响应式设计效果。

什么是 viewport？

viewport 是指浏览器窗口中用来显示网页的区域。

在移动端设备上，因为手机屏幕比较小，为了更好地适应不同大小的屏幕，viewport 的大小是可以被改变的。常用的一种方式是使用如下 meta 标签：

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

其中， width=device-width 表示 viewport 的宽度等于设备宽度（也就是浏览器窗口的宽度）， initial-scale=1.0 表示初始缩放比例为 1。

总结

在响应式设计中，Media Query 断点、vmin、vmax、vh 和 viewport 是非常重要的概念。Media Query 断点可以根据设备的特征值来动态调整样式，vmin/vmax/vh 可以根据视口大小进行相对布局，而 viewport 的设置也是非常重要的，可以让页面更好地适应不同大小的屏幕。它们之间相互配合，可以实现非常灵活和优雅的响应式设计效果。