Question

我正在努力制作一个自适应的WordPress主题，而我在标题文字没有响应方面遇到了麻烦。

当我尝试不同的屏幕尺寸时，标题文字最终会超出标题，我不想要这样。无论屏幕大小如何，我都希望它能保留在标题div中。

我的标题：

 <div id="header">

  <div id="titlebox">
  <p class="blogtitle"><?php echo get_bloginfo ( 'name' );  ?></p>
  <p class="tagline"><?php echo get_bloginfo ( 'description' );  ?></p>
  </div>

  <div id="searchbox"><?php get_search_form(); ?> </div>

 </div>

CSS：

#header { 
    width: 100%;
    height: 23.2%;
    margin-top: 2.1%;
    margin-bottom: 2.1%;
}
#titlebox {
    width: 60%;
    float: left;
}
.blogtitle {
    font-style: normal;
    text-shadow: 2px 2px #a2a2a2;
    font-size: 3em;
    padding-top: 2.1%;
    padding-right: 2.1%;
    padding-bottom: 0;
    padding-left: 2.1%;
}
.tagline {
    font-style: italic;
    text-shadow: 1px 1px #a2a2a2;
    font-size: 0.75em;
    padding-top: 0;
    padding-right: 2.1%;
    padding-bottom: 2.1%;
    padding-left: 2.1%;
}
#searchbox {
    width: 40%;
    float: right;
}

Answer 1

在较小的宽度下，您的文字太大，因此会溢出。您需要使用media queries，以便当您的宽度低于某个点时，缩小字体大小。

e.g：

@media all and (max-width: 767px) {
  .blogtitle {
    font-size: 2em;
  }
}
@media all and (max-width: 500px) {
  .blogtitle {
    font-size: 1em;
  }
}

回答上一个问题，创意响应式设计比我在这里回答的方式更多。而不是随机选择更改字体大小的断点，而是使用Chrome响应式检查器插件。它将向您显示主题中已使用的响应断点。最好尝试匹配这些。这样，您的更改将与相同断点处主题中的任何其他更改匹配。

这表示对于宽度最大为767的宽度，请为.blogtitle类2em而不是默认的3em设置字体大小。

Answer 2

这对我有用

.resposive_text {
    font-size: 30px; 
    font-weight: 600;
    /*here put anything you want for desktop size*/
}

@media (max-width: 500px) {
  .resposive_text  {
        font-size: 18px; 
        /*here put anything you want for mobile size*/
  }

}

在我的div中

<div class="resposive_text">
  <p>Bienvenidos a ENL Team Peru</p>
</div>

HTH

如何在div内部响应文本大小？

2 个答案: