媒体查询 - 相对位置的变化率

Question

我正在学习CSS流体布局＆amp;响应式设计，我试图了解媒体查询的工作原理。通常，当浏览器＆＃39;宽度调整大小，宽度相对于浏览器窗口的左侧更改。

对于大多数网站，如果我从一个狭窄的屏幕开始并慢慢地将浏览器窗口拖出到最大宽度，就像我这样做，左边距相对于浏览器宽度扩展。它增长的速度似乎是我拖出浏览器窗口的速度的一半。

然而，我正在处理一个主题，其左边距扩展的速度与浏览器窗口向右拖动的速度完全相同（直到媒体查询启动，然后跳转到任何正在进行的操作在查询中要求）。

我真的很想知道如何实现这一点，因为我想用类似的查询控制页面中的元素。我可以让它跳到正确的点，但它以不同的速度移动到标准容器。

更新

不幸的是，我不能举一个简单的例子。我想了解this的工作原理。从狭窄的浏览器窗口开始，然后慢慢向右拖动窗口，徽标向右移动的速度与拖出窗口的速度完全相同（直到它遇到跳跃点）。这就是我想要重现的内容。

基本上，我在图层滑块（它本身就是全屏）的标题部分正下方有一些文字。我可以对它应用媒体查询，但我无法让文本与身体其他部分一起移动。

Answer 1

由于此媒体查询，标题正在向右移动

@media only screen and (max-width: 767px) and (min-width: 480px)
.responsive .container {
width: 428px;
margin: 0 auto;
}

和

@media only screen and (max-width: 767px)
 .responsive .container {
    width: 268px;
    margin: 0 auto;
  }

它减少了标题的宽度并使用margin：auto;

使其与中心对齐

如果将滑块内容放在容器（标题）中，则如果将滑块的宽度指定为100％，则会相应调整大小。否则，您需要在这些块中的上述代码中更改滑块宽度。