css中层跟着浏览器尺寸变化

在Web开发中，我们经常使用CSS来控制网页的样式。CSS提供了丰富的属性和方法，可以让开发者自由地设计自己的网站样式。其中一个重要的属性就是层的定位和大小。在CSS中，我们可以为层设置宽度、高度、位置等属性，从而让它们在网页中呈现不同的样式。

然而，网页的尺寸和屏幕的分辨率是不尽相同的。当用户在浏览器中缩放页面或者窗口大小改变时，CSS中的层可能会出现跟不上尺寸变化的问题。这时，我们就需要使用一些方法来让层随着浏览器窗口大小变化而自动调整大小和位置。

/* 设置层的高宽为100% */
div{
  width: 100%;
  height: 100%;
}

/* 使层根据浏览器窗口自动调整大小 */
@media screen and (min-width: 768px){
  div{
    width: 50%;
  }
}

@media screen and (min-width: 1200px){
  div{
    width: 30%;
  }
} 

上述代码中，我们首先将层的高和宽设置为100%，从而使它占据整个浏览器窗口。然后，在CSS中使用媒体查询来根据不同屏幕尺寸设置层的宽度。@media关键字表示媒体查询，后面跟着一个屏幕的宽度范围。当屏幕宽度大于等于768px时，层的宽度被设置为50%；当屏幕宽度大于等于1200px时，层的宽度被设置为30%。

除了使用媒体查询外，我们也可以使用CSS3中的Flexbox来实现跟着窗口自动调整大小和位置的层。Flexbox是一个弹性盒子模型，在CSS中的实现非常简单，只需要为父元素设置display:flex即可。下面是一个例子：

/* 设置父元素为弹性盒子 */
.container{
  display: flex;
}

/* 子元素自动排列并自适应宽度 */
.box{
  flex: 1;
} 

在上述代码中，我们使用display:flex将父元素设置为弹性盒子，然后为子元素设置flex:1，这样子元素就会根据父元素自动排列并自适应宽度。

总之，在CSS中如何让层随着窗口自动调整大小和位置，有多种方法可以选择。我们可以使用媒体查询、Flexbox等技术来实现，具体选择哪种方法，需要根据实际情况来决定。