如何用Sass实现Div宽高比例自适应屏幕？解决vh/vw报错

先理清vh/vw单位的原理 #

• vw：等于视口（浏览器可见窗口）宽度的1%。比如窗口宽度为1000px时，1vw = 10px；窗口宽度变化，vw对应的实际像素值同步变化。
• vh：等于视口高度的1%。比如窗口高度为800px时，1vh = 8px；窗口高度变化，vh对应的实际像素值同步变化。

你遇到的Sass错误原因 #

你出现的SassError: 27798px*vh isn't a valid CSS value，是因为尝试将px单位与vh单位直接进行乘法运算——CSS不允许不同类型的单位直接相乘，必须先将px值转换为无单位的比例系数。

实现宽高自适应且保持比例的最佳方案 #

方案1：使用CSS原生aspect-ratio属性（推荐） #

这是现代浏览器最简洁的实现方式，无需复杂计算：

1. 用Sass预先计算原宽高的比例：

$width: 277.98px;
$height: 156.36px;
$aspect-ratio: $width / $height; // 计算得约1.778，即16:9比例

2. 给目标Div设置适配视口的宽度（或高度），然后指定宽高比，另一维度会自动按比例缩放：

.target-div {
  // 基于视口宽度适配，占视口宽度的90%
  width: 90vw;
  aspect-ratio: $aspect-ratio;
  
  // 若要基于视口高度适配，可替换为：
  // height: 50vh;
  // aspect-ratio: $aspect-ratio;
}

方案2：padding撑开法（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可利用CSS中padding百分比基于父元素宽度计算的特性：

1. 计算高度相对于宽度的百分比：

$width: 277.98px;
$height: 156.36px;
$height-percent: ($height / $width) * 100%; // 计算得约56.25%

2. 用padding撑开高度，内部内容用绝对定位填充：

.target-div {
  width: 90vw;
  position: relative;
  height: 0; // 让高度完全由padding控制
  padding-top: $height-percent; // 百分比基于宽度，自动维持比例
}

.target-div__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // 内部内容样式
}

方案3：手动vw单位转换（精确匹配基准屏幕） #

若需要Div在特定基准屏幕下保持原尺寸，可将px值转换为vw单位：

$width: 277.98px;
$height: 156.36px;
$base-screen-width: 1920px; // 设定基准屏幕宽度，如常见的1080p屏幕

// 计算原尺寸相对基准屏幕宽度的vw比例
$width-vw: ($width / $base-screen-width) * 100vw;
$height-vw: ($height / $base-screen-width) * 100vw;

.target-div {
  width: $width-vw;
  height: $height-vw;
}

这样屏幕宽度变化时，Div的宽高会按相同比例缩放，始终保持原比例。

内容的提问来源于stack exchange，提问作者Yehuda