跨域问题 CROSS

是什么

视口单位是相对于浏览器可视窗口（视口）的CSS单位，它根据视口的大小自动调整元素尺寸，是实现响应式布局的重要工具。

单位	名称	含义	示例
vh	视口高度单位	1vh = 视口高度的1%	height: 100vh 满屏高度
vw	视口宽度单位	1vw = 视口宽度的1%	width: 50vw 半屏宽度
vmin	视口最小值单位	1vmin = 视口较小边的1%	保持正方形
vmax	视口最大值单位	1vmax = 视口较大边的1%	很少使用

/* 假设屏幕是：宽 375px，高 800px */

100vw = 375px  (视口宽度)
100vh = 800px  (视口高度)
50vw  = 187.5px (宽度一半)
50vh  = 400px   (高度一半)
1vw   = 3.75px  (宽度的1%)
1vh   = 8px     (高度的1%)

vmin: min(视口宽, 视口高) = 375px, 所以 50vmin = 187.5px
vmax: max(视口宽, 视口高) = 800px, 所以 50vmax = 400px

与其他单位的对比

/* 1. 百分比（%）- 相对于父元素 */
.child {
  width: 50%;      /* 父元素宽度的50% */
  height: 50%;     /* 父元素高度的50%（父元素必须有固定高度） */
}

/* 2. 视口单位（vh/vw）- 相对于视口 */
.element {
  width: 50vw;     /* 视口宽度的50% */
  height: 50vh;    /* 视口高度的50% */
}

/* 3. 像素（px）- 固定值 */
.element {
  width: 200px;    /* 永远是200px，不随屏幕变化 */
}

方案	优点	缺点	适用场景
vh/vw	简单直接，自动适应	移动端地址栏问题	全屏布局、大区块
%	灵活，相对父元素	依赖父元素高度	内部元素布局
px	精确控制	不响应式	边框、小图标
rem	整体缩放	需要设置基准值	文字、间距
flex	弹性分配	不是尺寸单位	动态分配空间