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

时间：2022-11-04 09:48:52

I'm almost finished building the portfolio assignment for Free Code Camp but I've hit a bit of a wall.

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

The page is at - http://codepen.io/jjmax/full/avdVBE/

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

The only custom code I have for headings is:

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

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

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

When I resize the screen the h1 heading at the top of the page resizes properly, but the h2 and h3 headings do not. This is most noticeable in the Contact section of the page.

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

I've tried a few different things but can't figure this out.

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

2 个解决方案

#1

1  

You can use viewport value instead of ems, pxs or pts.

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

1vw = 1% of viewport width

1vw =视口宽度的1%

1vh = 1% of viewport height

1vh =视口高度的1%

1vmin = 1vw or 1vh, whichever is smaller

1vmin = 1vw或1vh,以较小者为准

1vmax = 1vw or 1vh, whichever is larger

1vmax = 1vw或1vh,以较大者为准

Try this font-size: 4vw;. I have changed font-size only in contact section you can do the same for other section as well.

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

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

Demo Here

#2

1  

Are you sure that those elements are supposed to change size? In bootstrap.min.css, the only headings affected by a @media breakpoint are <h1> elements that are inside .jumbotron elements (which is the case for the one at the top of your page).

你确定那些元素应该改变大小吗?在bootstrap.min.css中,受@media断点影响的唯一标题是.humbotron元素内的

元素(页面顶部的元素就是这种情况)。

If you want your <h2> (or any other elements) to change, you'll have to manually add the @media breakpoints to your custom stylesheet:

如果您希望更改

(或任何其他元素),则必须手动将@media断点添加到自定义样式表:

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

#1

1  

You can use viewport value instead of ems, pxs or pts.

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

1vw = 1% of viewport width

1vw =视口宽度的1%

1vh = 1% of viewport height

1vh =视口高度的1%

1vmin = 1vw or 1vh, whichever is smaller

1vmin = 1vw或1vh,以较小者为准

1vmax = 1vw or 1vh, whichever is larger

1vmax = 1vw或1vh,以较大者为准

Try this font-size: 4vw;. I have changed font-size only in contact section you can do the same for other section as well.

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

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

Demo Here

#2

1  

Are you sure that those elements are supposed to change size? In bootstrap.min.css, the only headings affected by a @media breakpoint are <h1> elements that are inside .jumbotron elements (which is the case for the one at the top of your page).

你确定那些元素应该改变大小吗?在bootstrap.min.css中,受@media断点影响的唯一标题是.humbotron元素内的

元素(页面顶部的元素就是这种情况)。

If you want your <h2> (or any other elements) to change, you'll have to manually add the @media breakpoints to your custom stylesheet:

如果您希望更改

(或任何其他元素),则必须手动将@media断点添加到自定义样式表:

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

相关文章