移动网站上的重叠文本

Question

我认为这只是一个 css 问题。所以我只会显示该代码。

  body {
  margin: 0px;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  color: white;
  background-image: url('https://m.mywebsite.com/style/mobile.jpg');
  background-size: cover;
}
h2 {
  position: relative;
  top: 40px;
  left: 22px;
  width: 750px;
  height: 45px;
  font-size: 85px;
  font-family: 'Raleway', sans-serif;
}
.nav {
  background-color: #ffffff;
  color: #000000;
  list-style: none;
  text-align: center;
  margin: 0px;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0;
  padding: 10px 0 10px 0;

}

.logo {
color: #000000;
float: center;
font-size: 50px;
font-weight: 600;
padding: 0 0 0 0;
 }

从试图找出问题所在，我试图查看 h2 和 .logo 可能继承了什么导致文本重叠。我尝试从主体样式中删除一些代码，但没有用。我也无法在网上找到太多关于为什么会发生这种情况的信息。我不是想浪费人们的时间，只是需要一些帮助。提前致谢！

顺便说一句，当我访问我的移动网站时，尽管样式已关闭，但我没有看到在 iphone 上查看我的网站时看到的重叠文本。

编辑添加我的 html ->

    <!DOCTYPE html>
    <html lang="en">
..
    <body>
      <ul class="nav">
        <div class="logo">TELEDATA</div>
        </ul>
       <h2>The number one social media influencer network</h2>
    </body>
    </html>

Answer 1

在移动视图中使用@mediaqueries

时，您必须降低 h2 元素上的 font-size

在您的情况下，保持 css 和 html 不变，将其添加到 css 文件的末尾：

@media only screen and (min-width: 480px) and (max-width: 767px){
 h2 {
  font-size:12px;
}

Answer 2

我找到了解决问题的办法。我将 h2 标签更改为 div

的 class

div {
-webkit-background-size: contain no-repeat;
-moz-background-size: contain no-repeat;
-o-background-size: contain no-repeat;
background-size: contain no-repeat;
}

.h2 {
  position: absolute;
  margin: 80px;
  left: 22px;
  width: 750px;
  height: 45px;
  font-size: 85px;
  font-family: 'Raleway', sans-serif;
}

现在一切正常。也感谢以上各位的建议！

移动网站上的重叠文本

Overlapping text on mobile website

css

iphone

mobile

text

overlap