CSS：改變段落的字體大小顯示H1的大小

我正在處理網站的移動版本，並且我注意到更改段落的字體大小會影響上面h1的顯示大小（即使h1的字體大小保持不變）。CSS：改變段落的字體大小顯示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; 
}

在此設置下，網站呈現這樣的：

但是，將段落的字體大小更改爲20 PT（移動CSS）會導致網站呈現這樣的：

我不知道爲什麼改變段落的字體大小會改變它上面的H1的顯示尺寸。（並且將該段的顯示尺寸顯着增加2pt）

我在Apple iPhone 4設備上的Google Chrome上測試此功能（320x420像素）。

來源

2016-02-15 Mitchell Robinson

在移動CSS要更改h1字體大小40pt

來源

2016-02-15 23:42:48 jono

是的，我希望h1在手機版上略大一些，但是在兩張圖片中h1都設置爲40pt。這兩張圖片是移動CSS的變體，而不是桌面移動比較。 –

使用pt作爲度量單位字體大小的屏幕是不是一個好主意 - PT測量是用於印刷。所以在屏幕上，pt大小將總是取決於屏幕分辨率，尤其是桌面屏幕和移動設備之間的屏幕分辨率可能會大不相同。使用em或px度量單位代替字體大小。

來源

2016-02-15 23:57:32 Johannes

我將h1字體大小更改爲4em，將p字體大小更改爲1.2em： http://i.stack.imgur.com/zkjFZ.png 但是，將p字體大小更改爲1.3em導致它看起來像這樣： http://i.stack.imgur.com/uMoi2.png 我很困惑，爲什麼改變p字體大小會影響h1的顯示大小，以及爲什麼字體1.2 em的大小會導致段落幾乎不可讀，並且1.3 em字體的尺寸會明顯變大。 –

em尺寸是相對的，通常從父級或更高級別元素繼承。你所描述的可能是由這些p和h1標籤中的元素（div）*的設置引起的。你也可以嘗試使用「rem」作爲一個單位，它總是相對於根元素（body或html）。這可能是無用的信息：http://www.w3schools.com/cssref/css_units.asp – Johannes

感謝您的快速回復，我已經擺弄了字體大小，似乎無論任何大小（h1或p）超過2.2rem左右，他們兩人的規模都大幅增加。這讓我感到莫名其妙 –

事實證明，這是Google Chrome的開發人員工具「設備模式」中的一個問題。該網站在我的iPhone上完美呈現，但各種奇怪的東西在Google Chrome中測試時發生。

謝謝你的迴應！

來源

2016-02-17 00:03:17

CSS：改變段落的字體大小顯示H1的大小

回答

相關問題