CSS 如何在使用百分比后调整窗口大小时使元素停止移动

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 来实现在调整窗口大小后，使元素停止移动的效果。当我们使用百分比来设置元素的尺寸时，元素的大小会根据窗口大小的改变而自动调整。但有时我们希望元素保持在固定的位置，而不随窗口大小的变化而移动。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用固定位置

我们可以通过使用 position 属性来将元素固定在页面上的特定位置。position 属性有几个值可供选择，其中最常用的值是 fixed 和 absolute。

fixed：元素相对于浏览器窗口进行定位。无论页面如何滚动，元素始终保持在固定的位置。例如：

#myElement {
  position: fixed;
  top: 100px;
  left: 200px;
}

这将使 myElement 元素始终位于距离浏览器窗口顶部 100 像素、距离左侧 200 像素的位置。

absolute：元素相对于其最近的已定位祖先元素进行定位。如果没有找到已定位的祖先元素，则相对于文档进行定位。例如：

#myElement {
  position: absolute;
  top: 100px;
  left: 200px;
}

这将使 myElement 元素相对于其最近的已定位祖先元素进行定位，并且始终保持在距离顶部 100 像素、距离左侧 200 像素的位置。

使用固定宽度和高度

如果我们希望在调整窗口大小后，元素的宽度和高度保持不变，我们可以使用固定的宽度和高度值。

#myElement {
  width: 300px;
  height: 200px;
}

这将使 myElement 元素的宽度为 300 像素，高度为 200 像素。无论窗口大小如何改变，元素的尺寸都不会发生变化。

使用媒体查询

媒体查询是 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 中的一种强大的特性，它可以根据设备的特性来应用不同的样式规则。我们可以使用媒体查询来针对不同窗口大小应用不同的样式规则，以实现元素在不同窗口尺寸下的布局。

@media screen and (max-width: 768px) {
  #myElement {
    width: 200px;
    height: 150px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  #myElement {
    width: 300px;
    height: 200px;
  }
}

@media screen and (min-width: 1201px) {
  #myElement {
    width: 400px;
    height: 300px;
  }
}

在上面的例子中，当窗口宽度小于等于 768 像素时，myElement 元素的宽度为 200 像素，高度为 150 像素。当窗口宽度在 769 像素至 1200 像素之间时，宽度为 300 像素，高度为 200 像素。当窗口宽度大于等于 1201 像素时，宽度为 400 像素，高度为 300 像素。

通过使用媒体查询，我们可以根据窗口大小应用不同的样式规则，从而实现元素在不同窗口尺寸下的布局和位置。