文本没有使用Bootstrap 3正确调整大小

时间:2015-09-23 06:51:26

标签: html css twitter-bootstrap

我差不多已经为Free Code Camp完成了投资组合任务,但我已经打了一个墙。

该页面位于 - http://codepen.io/jjmax/full/avdVBE/

我对标题的唯一自定义代码是:

h1, h2, h3 {
  font-family: 'Ovo', serif;
  text-shadow: 4px 4px 4px #a3a3a3;
}

h1 small {
  color: #007ea7;
  font-size: 45%;
}

当我调整屏幕大小时,页面顶部的h1标题会正确调整大小,但h2和h3标题不会。这在页面的“联系”部分最为明显。

我尝试了一些不同的东西,但无法解决这个问题。

2 个答案:

答案 0 :(得分:1)

您可以使用视口值而不是ems,pxs或pts。

  

1vw =视口宽度的1%

     

1vh =视口高度的1%

     

1vmin = 1vw或1vh,取较小者

     

1vmax = 1vw或1vh,取较大者

试试这个font-size: 4vw;。  我仅在联系部分更改了字体大小,您也可以对其他部分执行相同的操作。

.contact h2 {
    line-height: 3em;
    font-size: 4vw; //changed this
    text-shadow: 2px 2px 2px black;
}

<强> Demo Here

答案 1 :(得分:1)

你确定这些元素是假设来改变大小吗?在bootstrap.min.css中,受@media断点影响的唯一标题是<{em> <h1>元素内的.jumbotron个元素(就是那个元素的情况)在页面顶部)。

如果您希望更改<h2>(或任何其他元素),则必须手动将@media断点添加到自定义样式表中:

@media screen and (min-width:XXXpx) {
    h2 {font-size: xxx}
}