Question

我希望不要在宽度较小的移动设备上移动。我意识到我可以通过媒体查询来做到这一点，但我觉得可能有一种更清洁的方式。

.wrapper {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 23%;
  overflow: hidden;
  text-align: center;
}
#titlebackground {
  background: rgba(0, 0, 0, .5);
}
#title {
  font-family: Consolas, monaco, monospace;
  text-align: center;
  font-size: 5em;
  font-weight: 900;
  color: #fff;
  display: inline-block;
}
#titlelocation {
  position: relative;
  top: -50px;
}

<header>
  <div class="wrapper">
    <div id="titlelocation">
      <div id="titlebackground">
        <span id="title">My Title</span>
      </div>
    </div>
  </div>
</header>

如何提高标题以使其高于div的中心，但是防止它在较低分辨率下向上移动更高？

编辑：重现：在全屏幕上剪切运行代码然后更改屏幕宽度.. div向上移动屏幕越小。

Answer 1

您的.wrapper有一个百分比填充padding-top: 23%，因此在移动设备上，它会比桌面设备少得多，您可以添加一个固定的px填充，以便在所有设备上都相同。

.wrapper{
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 100px;
    overflow:hidden;
    text-align: center;
}

Answer 2

你可以使用css vh而不是百分比，然后给你你想要的价值。 vh是根据设备的高度来衡量的。

.wrapper {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 65vh;
  overflow: hidden;
  text-align: center;
}
#titlebackground {
  background: rgba(0, 0, 0, .5);
}
#title {
  font-family: Consolas, monaco, monospace;
  text-align: center;
  font-size: 5em;
  font-weight: 900;
  color: #fff;
  display: inline-block;
}
#titlelocation {
  position: relative;
  top: -50px;
}

<header>
  <div class="wrapper">
    <div id="titlelocation">
      <div id="titlebackground">
        <span id="title">My Title</span>
      </div>
    </div>
  </div>
</header>

Answer 3

使用绝对定位。这正是你要找的东西：

.wrapper{
	background: no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    overflow:hidden;
    text-align: center;
}
#titlebackground {
     background: rgba(0 , 0 , 0 , .5);
}
#title {
      font-family: Consolas, monaco, monospace;
      text-align: center;
      font-size: 5em;
      font-weight: 900;
      color: #fff;
      display: inline-block;
}
#titlelocation {
    position: absolute;
    bottom: 65%;
    width:100%;
}

<header>
      <div class="wrapper">
        <div id="titlelocation">
          <div id="titlebackground">
            <span id="title">My Title</span>
          </div>
        </div>
      </div>
    </header>

编辑：也可以使用vh作为填充的单位，但不适用于所有浏览器，特别是旧浏览器。

防止凸起的div根据屏幕宽度移动

3 个答案: