字体大小跳到高于特定值的随机数

Question

因此，我正在建立一个自适应网站，我制作了一个CSS文件，其中包含主页的所有样式。我首先设置了桌面版本的样式，现在正在开发移动版本。一切都非常简单。然而，我遇到了一个非常奇怪的问题。桌面上的字体大小设置为css，大约20像素，现在我希望通过放置@media标签在移动设备上增加该字体大小。此@media包含用于移动设备的新的递增字体大小。一切正常，直到我尝试更改a和p标签。大多数字体大小会增加到新的字体大小，但是有些字体大小不会增加，它们会更改为现在可以在我的样式表中找到的随机数。所以我坚信这可能是某个地方将字体大小设置为百分比。为了解决这个问题，我尝试将字体大小更改为小于所需大小的1 px。而且它变化了一点，所以我坚信我在某处证实了它的百分比。但是我只是将字体大小减小了3px，这一次它跳到了正确的字体大小。

所以要总结一下，我想通过@media标签设置字体大小。页面上的某些文本更改为完全随机数，但是当我将其设置为setrain值以下时，它会跳回我想要的大小。

我都删除了样式表中的每个font-size标签，而@media中的新字体都没有作用。

我给@media的字体大小加了一个重要标记

我向有问题的部分添加了注释，这两个部分都需要36 px的字体大小

body{
  margin:0;
  box-sizing:border-box;
  padding:0;
}

*{
  font-family: 'Roboto', sans-serif;
  box-sizing:border-box;
  color:#383838;

}



/* navbar */

.topnav {
  background-color: #43B02a;
  overflow: hidden;
  padding-left:15%;
  padding-right:15%;
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}



/* all links */

.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a i{
  color:white;
}

.el{
  color:white;
}



/* active */

.active {
  background-color: white;
  color: #43B02a;
}

.active:hover{
  color:white;
}



/* hide hamburger */

.topnav .icon {
  display: none;
}



/* dropdown box */

.dropdown {
  float: left;
  overflow: hidden;
}



/* dropdownbutton */

.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 10px 13px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;

}

bt{
  color:white;
}
bt i{
  transform: rotate(90deg);
  color:white;
  transition:0.3s;
}


.dropbtn:hover i{
  transform: rotate(0deg);
  transition:0.4s;
}



/* dropdownlist */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}



/* dropdownlinks */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}



/* Hover effect */

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #3c9e25;
  color: white;
  transition: 0.3s;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: #43B02a;
}



/* dropdnw unhide */

.dropdown:hover .dropdown-content {
  display: block;
}



/* responsiveness */

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav{
    padding:0;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .topnav a, bt{
    font-size:36px;
  }
}

#logbtn{
  float:right;
}

#logbtn lg{
  margin-left:10px;
  color:white;
  transition:0.3s;
}

#logbtn:hover lg{
  margin-left:5px;
  transition:0.7s;
}

#logbtn:hover i{
  margin-left:5px;
  transition:0.7s;
}



/* logobanner */

.logo_container{
  width:100%;
  background-color:white;
}

.logo_container img{
  width:20%;
  height:auto;
  margin:10px;
  margin-left:40%;
  margin-right:40%;
}



/* responsiveness */

@media screen and (max-width: 1000px) {
  .logo_container img{
  width:40%;
  margin:10px;
  margin-left:30%;
  margin-right:30%;
  }
  #logbtn{
  float:none;
}
  #logbtn i{
    display:none;
  }
}



.typewriter{
  width:100%;
  margin-top:15%;
  float:left;
}

.typewriter_mbl{
  display:none;
  margin-left:2%;
  margin-top:10%;
  font-size:20px;
  float:left;
  margin-bottom:-10%;
}

.typewriter_mbl h1{
  font-weight:400;
  color:white;
  text-shadow: 2px 2px 4px #383838;
}

.typewriter h1 {
  overflow:hidden;
  overflow-wrap: break-word;
  max-width:48ch;
  border-right: .15em solid #43B02a; 
  white-space: nowrap; 
  margin: 0 auto;
  letter-spacing: .10em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  float:left;
  color:white;
  text-shadow: 2px 2px 4px #383838;
}

/* The typing effect */
@keyframes typing {
  from { width: 0;
         opacity:1;}
  to { width: 100%;
       opacity:1;}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #43B02a; }
}
@media screen and (max-width: 1100px) {
  .typewriter{
    display:none;
  }
  .typewriter_mbl{
    display:block;
  }
}
@media screen and (max-width: 1000px) {
  .typewriter_mbl{
    margin:5%;
    font-size:46px;
  }
}



landing{
  width:100%;
  height:auto;
  background-image: url("../img/stock-photo-working-at-home-with-laptop-woman-writing-a-blog-female-hands-on-the-keyboard-370107740.jpg");
  padding-left:15%;
  box-sizing:border-box;
  float:left;
  background-size: cover;
  background-size: 100%;
  /*background-color: rgba(238, 238, 238, 0.81) !important;
  background-blend-mode: color;*/
  background-position: 0 30%; 

}

@media screen and (max-width: 1000px) {
  .banner{
  padding-left:2%;

}
}
.boxes{
  width:100%;
  float:left;
  margin-top:10%;
  margin-bottom:7.5%;
}
  .box{
    width:20.5%;
    margin-right:10%;
    height:50px;
    padding:12.5px;
    padding-right:20px;
    font-size:20px;
    box-sizing:border-box;
    float:left;
    background-color:rgba(67, 176, 42, 0.7);
    color:white;
     box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
  }

.box:hover{
     box-shadow: 0 15px 20px 0 rgba(0,0,0,0.2);
     background-color:rgba(67, 176, 42, 0.95);
     transition:0.3s;
     cursor:pointer;
     padding-right:10px;
  }

.box i{
  float:right;
  font-size:25px;
  color:white;
}

@media screen and (max-width: 1000px) {
  .box{
  width:100%;
  height:100px;
    padding-top:25px;
}
  landing{
    padding-left:0%;
  }
  .boxes{
    margin-bottom:0;
    text-align:center;
    background-color:#43B02a;
    padding:5%;
    padding-bottom:2.5%;
  }
  .box{
    font-size:54px;
    background-color:white;
    color:#383838;
    margin-bottom:2.5%;
  }
  .landingbox i{
    font-size:200%;
    margin:0;
    padding:0;
}
  .landingbox{
    width:100%;
    margin-left:10%;
}

}

.landingbox{
  width:80%;
  font-size:40px;
  text-align:center;
  float:left;
  color:#43B02a;
  margin-top:15%;
  margin-bottom:7.5%;
}

.landingbox i{
  color:#43B02a;
  margin-bottom:1.5%;
  margin-top:0;
  text-shadow: 2px 2px 4px #383838;
  transition:0.3s;
}

.landingbox:hover i{
  margin-top:1.5%;
  margin-bottom:0;
  transition:0.3s;
}

section{
  width:100%;
  padding:7.5%;
  padding-left:15%;
  padding-right:0%;
  float:left;
}

.boxi{
  width:calc(70% / 3);
  background-color:#f1f1f1;
  float:left;
  padding:2.5%;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
  margin-right:5%;
  text-align:center;
}
.boxi i{
  font-size:50px;
  color:#43B02a;
}

section h1{
  margin:0;
}

.eencontact{
  background-color:white;
  margin-right:5%;
  margin-top:4%;
  width:38%;
  float:left;
  font-size:20px;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
}
.eencontact i{
  background-color:#43B02a;
  padding:3%;
  color:white;
  margin-right:3%;
}

@media screen and (max-width: 1000px) {
  section{
    padding:5%;

  }
  .boxi{
    width:100%;

    margin-bottom:5%;
  }
  #last{
    margin-right:0;
  }

  .eencontact{
    width:100%;

  }

  section h1{
  font-size:54px;
    font-weight:400;
   }
  h2{
    font-size:54px !important;
    font-weight:400;
  }
  h3{
    font-size:40px !important;
    font-weight:400;
  }

  a{
    font-size:36px !important;
  }
  p{
    font-size:36px !important;
  }
  .branche{
    font-size:36px !important;
    width:33.3% !important;
  }
  .branche i{
    font-size:50px !important;
  }
}


footer{
  width:100%;
  float:left;
  color:white;
  background-color:#383838;
  padding:1%;
  padding-left:15%;
  padding-right:15%;
  padding-bottom:2%;
  color:white;

}

footer h3{
  margin-bottom:10px;
  color:#43B02a;
}

footer a{
  color:white;
}
footer i{
  color:white;
  margin-right:10px;
}

.footer_1-3{
  width: calc(80%/3);
  float:left;
  margin-right:10%;
  border-right:1px solid #cccccc;
}

@media screen and (max-width: 1000px) {
  footer{
    padding:5%;
  }
  .footer_1-3{
    width:40%;
    border-bottom:1px solid #cccccc;
    border-right:none;
    font-size:150%;
    padding-bottom:20px;
  }
}

.onepartner{
  float:left;
  width:15%;
  margin-right:1.5%;
}

.voordelen i{
  font-size:30px;
  color:#43B02a;
  margin-right:30px;
  width:50px;
  float:left;
}

.voordelen a{
  font-size:20px;
  color:#757575;
  width:80%;
  float:left;
  margin-top:20px;
}

#voordelenh1{
  margin-bottom:40px;
}

@media screen and (max-width: 1000px) {
  .voordelen i{
  text-align:center;
    width:100%;
    margin-right:0;
    margin-bottom:10px;


}

  .voordelen a{
  text-align:center;
    width:100%;

    margin-bottom:60px;

}
}

  #typcoach-left{
    width:65%;
    float:left;
    margin-right:5%;
  }

#typcoach-right{
  width:15%;
  height:auto;
  float:left;
}

.samenwerking{
  float:left;
  width:40%;
  margin-right:2.5%;
  background-color:#f9f9f9;
  box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
  color:#757575;
}

.samenwerking p{
  margin:2.5%;
}

.samenwerking-top {
  float:left;
  width:100%;
  height:auto;
  margin-bottom:2.5%;
  background-color:#f1f1f1;
}

.samenwerking-top h2{
  float:left;
  width:50%;
  color:#43B02a;
  padding-left:5%;
}

.samenwerking-top img{
  float:right;
  width:auto;
  height:40px;
  margin-right:5%;
  margin-top:15px;

}

.voordelen2 i{
  font-size:15px;
  color:#43B02a;
  margin-right:30px;
  width:5%;
  float:left;
  margin-left:2.5%;
}

.voordelen2 a{
  font-size:15px;
  color:#757575;
  width:82.5%;
  float:left;
  margin-left:2.5%;
}

@media screen and (max-width: 1000px) {
.samenwerking{
  width:100%;
  margin-right:0;
  margin-bottom:5%;
}

  .samenwerking-top h2{
    font-size:200%;
    font-weight:400;
}

  .voordelen2 i{
  font-size:30px;
  width:100%;
  text-align:center;
}

  .samenwerking p{
  font-size:15px;
  width:95%;
}

.voordelen2 a{
  font-size:30px;
  width:95%;
  text-align:center;
}

}

footer i{
  font-size:30px;
}

.branche{
  width:calc(80%/3);
  float:left;
  text-align:center;
  font-weight:400;
  font-size:25px;
  margin-top:5%;
}

.branche i{
  width:100%;
  text-align:center;
  font-weight:bold;
  font-size:40px;
  padding-bottom:20px;
  cursor:pointer;
  transition:0.3s;
  color:#43B02a;
}

.branche:hover i{
  font-size:50px;
  transition:0.3s;
  padding-bottom:15px;
  margin-top:-5px;
  color:#757575;
}

.arrowup{
  width:100%;
  text-align:center;
  color:#43B02a;
  font-size:40px;
}

.arrowup i{
  color:#43B02a;
  font-size:40px;
  margin:5%;
  transition:0.3s;
  cursor:pointer;
}

.arrowup:hover i{
  margin-top:4.5%;
  margin-bottom:5.5%;
  transition:0.3s;
}

对于html

 <!doctype html>

<html lang="nl">
<head>
  <meta charset="utf-8">

  <title>Brand name | Home</title>
  <meta name="description" content="
Een moderne typecursus voor professionals!">
  <meta name="author" content="Mikavdwiel.nl">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <meta name="theme-color" content="#43B02a" />
  <link rel="stylesheet" href="header-footer.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">



</head>


<body>
<header> 

  <div class="logo_container">
    <img src="img/logo (002).png">
  </div>
 <div class="topnav" id="myTopnav">
  <a href="index.html" class="active">Home</a>
  <a href="inschrijven.php" class="el">Inschrijven</a>
  <div class="dropdown">
    <button class="dropbtn"><bt>Over ons 
      <i class="fa fa-caret-down"></i></bt>
    </button>
    <div class="dropdown-content">
      <a href="typcoach.html">Typcoach</a>
      <a href="samenwerkingen.html">Samenwerkingen</a>
      <a href="kwaliteitsbepalingen.html">Kwaliteitsbepalingen</a>
    </div>
  </div> 
  <a href="contact.php" class="el">Contact</a>
  <a href="login.html" class="el" id="logbtn"><i class="fas fa-sign-in-alt"></i> <lg>Login</lg></a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fas fa-bars"></i></a>
</div>
  <script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
</header>
  <landing>
  <div class="landing">
   <div class="typewriter">
   <h1>Leer op een effectieve manier in 5 uur blindtypen!</h1>
   </div>
   <div class="typewriter_mbl">
   <h1>Leer op een effectieve manier in 5 uur blindtypen!</h1>
   </div>

    <div class="landingbox">
      <i class="fas fa-arrow-circle-down"></i>
    </div>
    </div>
  </landing>


  <section>
    <div class="boxi">
      <i class="fas fa-tachometer-alt"></i><h2>
      Snel
      </h2><p>
      Binnen 5 uur kunnen blindtypen!
      </p>
    </div>
    <div class="boxi">
      <i class="fas fa-user-tie"></i><h2>
      Professioneel
      </h2><p>
      Een cursus speciaal voor profesionals!
      </p>
    </div>
    <div class="boxi" id="last">
      <i class="fas fa-chart-line"></i><h2>
      Resultaat
      </h2><p>
      Meteen resultaat in uw bedrijfsvoering!
      </p>
    </div>
  </section>


  <section style="background-color:#f1f1f1;">
  <h1 id="responsivetexth1">
    Kunnen wij u helpen?
  </h1>
    <p><!--this paragraph is one of the elements that has the problem-->
      Heeft u vragen of wilt u zich graag inschrijven, neem dan nu contact met ons op.
    </p>
    <div class="eencontact">
    <i class="fas fa-envelope"></i> <a>Email@sdfsdf.nl</a>
    </div>
    <div class="eencontact">
    <i class="fas fa-phone"></i> <a>06 12345678</a>
    </div>
    <div class="eencontact">
    <i class="fas fa-headset"></i> <a>Contact formulier</a>
    </div>
    <div class="eencontact">
    <i class="fas fa-map-marker-alt"></i> <a>straat nr, stad</a>
    </div>
  </section>

  <section>
  <h1>
    Bekijk wat bij u past
  </h1>
  <div class="branche">
    <i class="fas fa-medkit"></i>
  Zorginstellingen
  </div>
    <div class="branche">
      <i class="fas fa-building"></i>
   Bedrijven  
  </div>
    <div class="branche">
      <i class="fas fa-graduation-cap"></i>
  Onderwijsinstellingen  
  </div>
  </section>


  <section style="background-color:#f1f1f1;">
    <h1 id="voordelenh1">
      Wat zijn de voordelen?
    </h1>
    <div class="voordelen"><!--all of these a elements have the problem-->
    <a><i class="fas fa-tachometer-alt"></i> Je leert blindtypen in 5 uur!</a>
    <a><i class="fas fa-smile"></i> Door een afname in de hoge werkdruk kunnen mensen meer ontspannen gaan werken. </a>
    <a><i class="fas fa-chart-line"></i> Werktempo gaat omhoog, productiviteit neemt toe. </a>
    <a><i class="fas fa-desktop"></i> Gerichte aandacht op de inhoud van het werk in plaats van op het toetsenbord. </a>
    <a><i class="fas fa-comments"></i> Beter contact met uw gesprekspartner tijdens uw werkzaamheden. </a>
    <a><i class="fas fa-keyboard"></i> Typen met een afdekrekje, waardoor kijken onmogelijk is en u echt op uw vingers moet gaan vertrouwen. </a>
    <a><i class="fas fa-heartbeat"></i> Human4active bedrijfszorg & coaching informeert de cursisten over gezond werken. </a>
    </div>
  </section>
  <div class="arrowup">
      <i class="fas fa-arrow-circle-up"></i>
    </div>
  <footer>
  <div class="footer_1-3">
  <h3>
  Locatie  
  </h3>
    <a>
      Straat, nr<br>
      postcode plaats<br>
      Nederland
    </a><br>
    <h3>
  Social media 
  </h3>
    <a> <i class="fab fa-facebook-f"></i> </a> <a> <i class="fab fa-instagram"></i> </a> <a> <i class="fab fa-linkedin-in"></i> </a>
  </div>
    <div class="footer_1-3">
  <h3>
  Meer van ons 
  </h3>
    <a>sdfsdfsdfk</a><br>
    <a>Tdfsdfsdfn</a><br>
      <h3>
  Samenwerkingen en keurmerken
  </h3>
      <a>Husdfsdfive</a><br>
    <a>Btfsdfys</a><br>
  </div>
    <div class="footer_1-3" style="margin-right:0;">
  <h3>
  Over ons 
  </h3>
    <a>Typcoach</a><br>
    <a>voorwaarden & privacybeleid</a><br>
    <a>Kwaliteitsbepalingen</a><br>
    <a>Keurmerken</a><br>
      <h3>
  Contact
  </h3>
      <a>Hfdsdfive</a><br>
    <a>Btsddfsdfys</a><br>
  </div>
  </footer>

</body>
</html>

我把它放在codepen上： https://codepen.io/Mika_vd_wiel/pen/JQOeYb

Answer 1

现在我看到了您的代码，我可以看到您有几个大字体声明：

@media screen and (max-width: 1000px)
    h2 {
        font-size: 54px !important;
        font-weight: 400;
    }
}
@media screen and (max-width: 1000px)
    .typewriter_mbl {
        margin: 5%;
        font-size: 46px;
    }
}
@media screen and (max-width: 1000px)
    section h1 {
        font-size: 54px;
        font-weight: 400;
    }
}

它们从小到大。

您的主体声明应包括一个字体大小以设置基本大小。

此外，您正在使用H1和H2而不删除它们的默认值，这使它们有些不可预测。尝试改用span或div更好地控制它。或者，您可以使用Normalization CSS删除默认值。

这不是快速解决方案。祝你好运！