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 - ＆gt;

    <!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元素的字体大小

在你的情况下，请保持你的css＆amp; html原样，将其添加到您的css文件的末尾：

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

Answer 2

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

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;
}

现在一切正常。感谢上面的人也提出了你的建议！

在移动网站上重叠文本

2 个答案: