Question

我创建了一个带有视差背景（stellar.js）的Bootstrap 3网站。

我正在尝试在span-tags内的此背景上创建一个居中文本，该文本应根据屏幕大小相应地更改其大小。由于“.background-photo span”使用1280px的固定宽度，我打算在宽度上应用媒体查询，以便在较小的分辨率上相应地更改大小。

问题是我的媒体查询无法在767和1223px的屏幕宽度之间工作，并且文本突破了范围。文本框应保持居中，并相应地更改其大小，而不会破坏相应的行宽。

请查看我创建的JS BIN并更改窗口大小以查看问题：

JS BIN Example

我很感激你的帮助。

Answer 1

看起来你的.container div及其父级在某些断点处没有调整它们的宽度。有一点，媒体查询调整父跨度的宽度为400px，而.container div也不会减少到400px。

我建议重新配置引导媒体查询，以确保这两个元素在相同的断点处改变宽度。如果可以，请为父母提供一个id，以便轻松访问。

Answer 2

以下CSS终于解决了我的问题：final JS BIN

    .background-photo span {

    bottom: 100px;

    background-color: black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    color: white;
    display: block;
    left: 50%;
    margin-left: -640px;
    font-size: 38px;
    padding: 10px;
    position: absolute;
    text-shadow: 0 2px 0 black, 0 0 10px black;
    width: 1280px;
}

@media (max-width: 479px) {
  .background-photo span {

    margin-left: -150px;
    font-size: 18px;
    width: 300px;

  }
}


@media (min-width: 480px) and (max-width: 767px) {
  .background-photo span {

    margin-left: -225px;
    font-size: 18px;
    width: 450px;

  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .background-photo span {


    margin-left: -300px;
    font-size: 20px;
    width: 600px;

  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .background-photo span {

    margin-left: -450px;
    font-size: 22px;
    width: 900px;  

  }
}

@media (min-width: 1200px) {
  .background-photo span {

  }
}

@media (min-width: 768px) {
  #service-container {
    width: auto;  

  }  
}

如何在视差背景之上对跨文本应用媒体查询？

2 个答案: