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

我正在开发一个网站的移动版，我注意到更改段落的字体大小会影响其上方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%;
}

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;
}

移动版本的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%;
}

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以上）

---

我正在苹果iPhone4设备（320px×420px）上用谷歌Chrome进行测试.

在移动CSS中，您正在将

h1

字体大小更改为

40pt

在移动CSS中，您正在将

h1

字体大小更改为

40pt

使用

pt

作为屏幕上字体大小的测量单位，这不是一个好主意-pt测量用于打印。因此，在屏幕上，pt大小始终取决于屏幕分辨率，尤其是桌面屏幕和移动设备之间的分辨率可能会大不相同。使用em或

px

测量单位代替字体大小。

在屏幕上使用

pt

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

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

---

谢谢你的回复

事实证明，这是谷歌Chrome开发工具“设备模式”的一个问题。该网站在我的iPhone上呈现得非常完美，但在谷歌Chrome上测试时发生了各种奇怪的事情

---

谢谢你的回复

是的，我希望h1在移动版上稍微大一点，但在两张图片上，h1都设置为40pt。这两张图片是移动css的变体，不是桌面到移动的比较。是的，我希望h1在移动版本上稍微大一点，但在这两张图片上，前提是h1设置为40pt。这两张图片是移动css的变体，而不是桌面与移动设备的比较。我将h1字体大小更改为4em，将p字体大小更改为1.2em：但是将p字体大小更改为1.3em导致它看起来像这样：我不明白为什么更改p字体大小会影响h1的显示大小，以及为什么1.2 em的字体大小会导致段落几乎不可读，而1.3 em的字体大小会显著增大。em大小是相对的，通常从父元素或更高级别的元素继承而来。您所描述的可能是由这些p和h1标记周围的元素（div）的设置引起的。您还可以尝试使用“rem”作为一个单元，它总是相对于根元素（body或html）。这可能是不安全的信息：感谢您的快速回复，我已经对字体大小进行了调整，似乎每当其中一个大小（h1或p）超过2.2rem左右时，它们的大小都会大幅增加。这让我很困惑，hahaI将h1字体大小更改为4em，将p字体大小更改为1.2em：然而，将p字体大小更改为1.3em使其看起来是这样的：我不明白为什么更改p字体大小会影响h1的显示大小，以及为什么1.2 em的字体大小会导致段落几乎不可读，而1.3 em的字体大小会显著增大。em大小是相对的，通常从父元素或更高级别的元素继承而来。您所描述的可能是由这些p和h1标记周围的元素（div）的设置引起的。您还可以尝试使用“rem”作为一个单元，它总是相对于根元素（body或html）。这可能是不安全的信息：感谢您的快速回复，我已经对字体大小进行了调整，似乎每当其中一个大小（h1或p）超过2.2rem左右时，它们的大小都会大幅增加。这让我很困惑哈哈