我差不多已经为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标题不会。这在页面的“联系”部分最为明显。
我尝试了一些不同的东西,但无法解决这个问题。
答案 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}
}