CSS 根据屏幕分辨率设置不同的对齐方式

Question

这是我正在开发的网站...

http://camerabeanbags.co.uk/test/

这是响应式的，因此如果您打开网络浏览器窗口并更改宽度，您可以看到网站发生了变化。如果您查看绿色条右上角的“您的购物车”按钮，您会发现它在右侧对齐。如果您更改 Web 浏览器窗口的宽度，它会向左对齐。

我怎样才能更改网络浏览器在将其与左侧对齐之前必须达到的宽度，因为我希望它仅在没有空间让它们彼此相邻时才这样做。就像在 iPad 上一样，它向左对齐，但我希望它向右对齐。我已经尝试使用 CSS @media，但无法为这个特定元素弄清楚。

请你帮我处理我需要的 CSS，以便它仅在特定屏幕宽度处向左对齐。

谢谢，

哈维

Answer 1

在您网站的 CSS 中，已经有一个媒体查询，这就是导致购物车向左移动的原因。它看起来像这样:

@media (max-width: 767px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}

超过 767px，这两个元素的样式为 float: left。

如果我们删除该规则，以便元素继续向左浮动，我们可以看到购物车仍会排成一行，搜索宽度可达 417 像素。所以我建议简单地修改媒体规则中的值(使用舍入数字):

@media (max-width: 420px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}