Question

我正在完成一个项目，主要是一个开头的短视频照片查看器。在视频中有一个标题，非常简单：

  <div id="presentacion">
    <h1>PARANA</h1>
    <h2>PHOTOGRAPHIES DE MAX RUIZ</h2>
  </div>

像这样的css：

#presentacion h1{
    font-family: Deser;
    font-weight: lighter;
    padding: 0;
    margin: 0;
    margin-right: -.2em;
    line-height: 1em;
    font-size: 7.5em;
    letter-spacing: .35em;
    color: white;
}

#presentacion h2{
    font-family: Deser;
    font-weight: lighter;
    letter-spacing: .2em;
    padding: 0;
    margin: 0;
    font-size: 1.8em;
    color: white;
}

这在桌面计算机上看起来很好：

http://maxruiz-parana.com

对于移动设备，我的媒体查询设置略有不同，如下所示：

  #presentacion h1{
    font-family: Deser;
    font-weight: lighter;
    padding: 0;
    margin: 0;
    margin-right: -.2em;
    line-height: 1em;
    font-size: 9em;
    letter-spacing: .35em;
    color: white;
  }


  #presentacion h2{
    font-family: Deser;
    font-weight: lighter;
    letter-spacing: .2em;
    padding: 0;
    margin: 0;
    font-size: 3.5em;
    line-height: 1.3em;
    color: white;
  }

如您所见，差异很小。现在，如果您在手机上查看同一个网站，您会看到标题从完全不同的地方开始，然后卡入到位。为什么会这样？任何想法都赞赏。感谢

EDIT ---------------------------------------------- ---------------------

我发现消除了以下声明：

html {
  position: fixed;}

从我的媒体查询部分解决了标题移动的问题，但我确实想要为移动修复html。任何想法都赞赏。感谢

Div在移动设备上移动？

0 个答案: