如何在css中实现最小左/右

Question

我的css中有一个元素，如下所示

.xyz{
    position:absolute;
    left:50%;
    }

现在，正如预期的那样，当我缩小浏览器窗口的宽度时，这个元素会向左移动。但是，我希望它在某个点停止，因为否则它会开始重叠其他元素。原则上，这非常类似于最小高度和最小宽度的特性.但没有像民左或民顶这样的财产。我怎样才能实现这一点。

Answer 1

如果您可以估计窗口大小，移动应该停止的位置(例如700px)，您可以使用媒体查询：

@media (max-width: 700px) {
  .xyz {
    left: 10px;
  }
}

然后，对于比700px更窄的窗口，元素被固定在left: 10px (适合您的CSS )。