使用@media删除height属性

Question

p {
  overflow-y: hidden;
  height: 150px;
}

@media screen and(min-width: 700 px) {
  p {
    max-height: 150 px;
  }
}

<p>
   Hello Hello Hello Hello Hello Hello Hello Hello Hello
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</p>

<strong>h1</strong>

我希望height在屏幕宽度小于700px时删除该属性.如果我这样做height:0px;,它完全隐藏了段落.任何CSS解决方案？或者我需要使用jQuery？

Answer 1

使用height: auto媒体查询.这是默认设置.它将覆盖标准CSS中的固定高度.

p {
  overflow-y: hidden;
  height: 150px;
  background: green;
}

@media screen and (min-width: 700px) {
  p {
    height: auto;
    max-height: 150px;
    background: yellow;
  }
}

<p>
  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</p>

<strong>h1</strong>

BTW:你必须写@media screen and (min-width: 700px)- >"700"和"px"之间没有空格,"150"和"px"之间没有空格min-height,但是"和"之间的空格和媒体查询中的开头"("