Question

因此，当用户调整网页大小时，我希望div框的宽度和高度增大/缩小。我希望窗口大小和框大小同时改变，因此当窗口拉伸时框会拉伸。有没有办法只在css中做到这一点？

这是我到目前为止所拥有的

    <div id="a">
    </div>

CSS

#a{

    width: 150px;
    height:200px;
    border-style: solid;
    border-width:7px;
    float:left;
    margin-left:20px;
    margin-right:20px;

}


@media screen and (max-width:1500px)(max-height:3000px) {
    #a {
        width: 70%;
        height:70%;
    }

Answer 1

您错过了and

@media screen and (max-width:1500px) and (max-height:3000px) {

为什么要使用max-height:3000px？想想移动优先而不是。
从“minimal-or-up”开始构建CSS，换句话说就是使用类似的东西：

/* Default styles +  Extrasmall devices and up!! */
#a{
  width: 70%;
  border: 7px solid #000;
}

/* Tablets and up */
@media (min-width: 768px) { 
  #a{
      width: 150px;
      /* 7px border will be inherited from extrasmall devices... etc */
  }
}

/* Desktop and up */
@media (min-width: 992px) { 
  #a{
    /* Will be 150px width. Need styles?  */
  }
}

/* Large desktops */
@media (min-width: 1200px) { 
  #a{
    /* Will be 150px width. Need styles?  */
  }
}

Answer 2

你写的几乎就是它，但是

1。）在“常规”CSS中也使用百分比值。您可以将它们与max-width，min-width，max-height和/或min-height设置与px值结合使用，以便不超过或低于特定大小。

2.。）使用百分比值时，父元素需要具有设置的宽度和/或高度（取决于您使用百分比值的轴）。这也适用于父级的父级，依此类推，直至body和html元素，这就是您经常看到此规则的原因：

html, body {
  width: 100%;
  height: 100%;
}

如何在更改窗口大小时更改大小的响应式div框

2 个答案: