CSS：改变段落的字体大小改变显示H1的大小

Question

我正在研究网站的移动版本，我注意到更改段落的字体大小会影响其上方h1的显示大小（即使h1的字体大小保持不变）。< / p>

桌面版的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设备上的Google Chrome进行测试（320像素x 420像素）。

Answer 1

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

Answer 2

在屏幕上使用pt作为字体大小的测量单位不是一个好主意 - pt测量用于打印。因此，在屏幕上，pt大小将始终取决于屏幕分辨率，特别是在桌面屏幕和移动设备之间可能会有很大差异。请使用em或px测量单位代替字体大小。

Answer 3

事实证明，这是Google Chrome开发人员工具“设备模式”中的一个问题。该网站在我的iPhone上完美呈现，但在Google Chrome中进行测试时发生了各种各样的奇怪的事情。

感谢您的回复！