html - CSS:更改段落的字体大小会更改 H1 的显示大小

Question

我正在开发一个网站的移动版本，我注意到更改段落的字体大小会影响其上方 h1 的显示大小(即使 h1 的字体大小保持不变)。

桌面版的 css 是:

div.introWrapper
{
    width:100%;
    min-height:400px;
    text-align:center;
    float:left;
}

div.introWrapper h1
{
    font-size:32pt;
    margin-top:0px;
    padding-top:150px;
}

div.introWrapper p
{
    padding-left:20%;
    padding-right:20%;
}

移动版的css是:

div.introWrapper h1
{
    padding-left:120px;
    padding-right:120px;
    font-size:40pt;
}

div.introWrapper p
{
    font-size:18pt;
    padding-top:20px;
    padding-left:140px;
    padding-right:140px;
}

在此设置下，网站呈现如下:

然而，将段落的字体大小更改为 20pt(在移动 css 中)会导致网站呈现如下:

我不确定为什么更改段落的字体大小会更改其上方 h1 的显示大小。 (并将段落的显示大小增加明显超过 2pt)

我正在 Apple iPhone 4 设备(320 像素 x 420 像素)上的 Google Chrome 中对此进行测试。

Answer 1

在移动 CSS 中，您将 h1 字体大小更改为 40pt