Question

我无法更改h1的大小。我尝试了％，em，px 我也尝试按Ctrl + F5强制浏览器兑现但没有用

我需要知道问题出在哪里，以及如何以较小的单词将文本保持大尺寸。

这是index.html

{% extends 'base.html' %}
{% load static %}
{% block title %} Markvira {% endblock %}
   
{% block content %}

  <!-- main -->
  <main role="main">
    <section class="section-one">
      <div class="container-one">
        <h1 class="h1"> Fly <span>With <br> Our</span> Wings </h1>
        <p class="p">it's the time to fly in yhe world of success with our marketng tools,we give you wings </p>
      </div>
    </section>

    <section class="section-two">
      <div class="container-two">


      </div>
    </section>



  </main>
  <!-- End of Main -->
{% endblock %}

这是style.css

@import "header.css";
@import "footer.css";


body html{
    margin: 0px;
    padding: 0px;
    font-size: 75%;
}

/* section one */
.section-one{
    background-image: url('../images/fly-wings.jpg');
    -webkit-backround-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}


.h1{
    
    font-family: poppins;
    font-weight: bold;
    color: white;
    padding: 1.5em 0 1em 15em;
}

.h1 span{
    font-size: 1em;
}

.p{
  font-size: 300px;
  font-family: poppins;
  color: white;
  padding: 1.5em 0 1em 12em;
}

@media screen and (min-width: 601px) {
    .h1 {
      font-size: 40px;
    }
  }
  
@media screen and (max-width: 600px) {
    .h1 {
      font-size: 100px;
    }
  }

/* End of Section One */

/* Section Two */
.section-two{
  background-image: url('../images/orange-back.jpg');
  -webkit-backround-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

我总是会得到这个大小，无法增加它enter image description here

Answer 1

您首先定义.h1类的媒体查询将完全覆盖，因此在此处设置字体大小将无效。

  @media screen and (min-width: 601px) {
    .h1 {
      font-size: 40px;
    }
  }



@media screen and (max-width: 600px) {
    .h1 {
      font-size: 100px;
    }
  }

这两个规则控制着.h1类的大小。最大宽度将小于600像素，最小宽度将大于601像素。尝试在那里修改字体大小。现在，对于宽度较小的屏幕，您将其设置为100px；对于宽度大于600px的屏幕，则将其设置为40px。

无法更改H1大小

1 个答案: