Question

是否可以定义CSS3告诉的元素高度：

if viewport >= 1000px then
      element height: 300px (in pixels)
else if viewport < 1000px
      element height: 30vh (30% of viewport height)

所以我想要的是拥有一个具有30％视口但不超过300px的元素。有可能吗？

这是我测试但没有用的：

div {
    height: 30vh;
    max-height: 300px;
}

Answer 1

由于没有要检查的要点，因此我将进行一系列假设。

元素本身遵守高度限制
目标中的元素在其父母之外溢出。

添加溢出：隐藏在目标元素中是否可以解决问题？

此致

Answer 2

您可能想要这样的东西： JSfiddle

<p>test content</p>

p {
  height: 30vh;
  background-color: blue;
}

@media only screen and (max-width: 1000px) {
  p {
    height: 300px;
    background-color: red;
  }
}

vh（视口）中的高度和px中的最大高度（像素）

2 个答案: