Question

我的主标题没有改变大小以适应设备，它只是保持相同的大小而不是响应。 here is a picture of the problem.

HTML：

＆＃13;

@media (min-width: 768px)
.middle-content .intro-text .name {
  font-size: 4.75em;
}

.middle-content  .intro-text .name {
  display: block;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10em;
  color: white;
}

＆＃13;

<!-- Intro Section -->
<section id="intro" class="intro-section">
  <div class="container">
    <div class="row">
      <div class="middle-content col-lg-12">
        <div class="intro-text">
          <h1 class="name">nlythdsgnr</h1>
          <span class="skills">graphic designer</span>
        </div>
      </div>
    </div>
</section>

＆＃13;

Answer 1

1）将color: white;更改为color: #000;以获得更好的结果。

2）你错过了@media代码中的{}。

3）替换这样的css代码：

.middle-content  .intro-text .name {
    display: block;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 7em;
    color: #000;
}

@media screen and (max-width:740px) {
.middle-content .intro-text .name {
    font-size: 4.75em;
 }
}

4）其他变化。

这是Demo

主标题不响应

1 个答案: