Css 自举响应高度

我正在制作一个网站，我正在制作一个登记表，但我需要根据wiewport调整div高度，如下所示：

xs设备：12个
sm设备：9个
md设备：7台

注意：我使用的是bootstrap 4，如下所示：

@media only screen and (max-width: 500px) {
   div{
       height: 12px;
   }
}

可以使用查找多个设备的视口大小，并将最大宽度替换为所需的大小

媒体查询将检查屏幕大小，如果条件为真，则在块内应用指令

及