HTML裡面的大小機關如何選擇,html5 – CSS中的大小機關

TL; DR：

>使用％進行水準頁面布局

> em非常适合垂直間距

>使用你喜歡的任何字型大小(我喜歡它)

>使用em進行媒體查詢

CSS測量機關

我發現我對不同CSS測量機關的使用随着我正在處理的測量區域而變化：水準,垂直,排版或媒體查詢.

水準測量

水準空間為頁面提供結構.是以,水準測量與機關相對于頁面寬度(％)的效果很好.例如,它可以為主要内容提供一些基本的喘息空間：

#main {

width: 90%;

margin: 0 auto;

}

當一個或所有水準測量與頁面或其容器成比例時,更複雜的布局(例如,列)也可以很好地工作.

.column-main {

width: 61.8%;

}

.column-secondary {

width: 38.2%;

}

這個想法有一個必然結果,即如果你很好地設定你的容器結構,you won’t have to do much horizontal sizing on the contents.你基本上讓塊級元素填充容器的寬度,就像他們喜歡做的那樣,你們都已經完成了設定.

垂直測量

垂直空間更多地是關于内容的結構(即文檔流中的元素彼此有多接近),并且我認為這些測量對于固定和相對機關(px或em)都可以正常工作.

但是,在這裡使用相對機關有助于給你一個vertical rhythm,這可能非常令人愉快.它還允許您更改内容(讀取：字型大小)并保持垂直間距成比例.

p,ul,ol,dl {

margin: 0 1em;

}

印刷測量

字型測量屬于他們自己的類别,可能是因為font-size充當了em中所有其他測量的基礎.我見過不同政策的倡導者,但從我看到的任何測量都可以正常工作,隻要你知道你在做什麼.

PX

在px中設定font-size非常可靠且易于計算.在IE6之後的時代,它也可以很好地擴充,是以如果你喜歡這個,那麼就沒有理由不使用px.

我在使用px時遇到的唯一問題是它沒有利用CSS級聯.換句話說,一旦我在px中指定了大小,如果我想進行任何大規模的更改,我必須傳回并單獨更改它們中的每一個.

EM

盡管有任何缺點,我認為em可以是指定font-size的一種非常好的方法.我喜歡的是它讓我快速看到我的字型大小之間的關系.很多時候我并不關心字型的确切大小,因為對我來說最重要的是該大小與頁面上所有其他大小的關系.

使用em的重要一點是将大小設定為盡可能接近結束标記.這意味着我避免在容器上設定字型機關：

aside { font-size: 0.8em; }

...

aside p { font-size: 0.8em; }

主要是在标題和文字項目上設定尺寸：

h1 { font-size: 2.5em; }

h2 { font-size: 2.1em; }

h3 { font-size: 1.7em; }

...

無論如何,我喜歡我能清楚而輕松地看到那裡尺寸之間的關系.

REM

根據浏覽器的基本字型大小調整大小似乎是Web标準的事情,因為那樣你就允許最佳基本字型大小可能不是16px的浏覽器.但在實踐中,它的另一種方式是有效的.從我所看到的,浏覽器使用16px作為基本字型大小,因為這是每個人都期望的,并且将CSS測量的實際大小設定為在浏覽器中看起來不錯.

我看到的最大缺點是browser support.如果您為不支援rem的浏覽器編碼,您将添加兩次規則：

p {

font-size: 16px;

font-size: 1rem;

}

字型間距

由于大多數其他字型測量屬于垂直或水準測量的類别,是以在獲得字型大小後,其他字型測量更容易弄清楚.例如：

h1 {

font-size: 2.5em;

margin-top: 0.618em;

margin-bottom: 0.3em;

line-height: 1.2;

}

媒體查詢

在大多數情況下,浏覽器在媒體查詢中處理em和px的方式幾乎沒有差別.即使使用者使用文本縮放來調整頁面大小,這也适用.

但是,如果有人在浏覽器設定中更改了預設文本大小,則表現方式會有很大不同. See my answer to a related question和我的@[email protected]進行了更長時間的解釋.

簡而言之,雖然在大多數情況下px适用于媒體查詢,但使用em肯定更安全.

其他情況

當然,上述一般性評論不适用.例如,您可能會發現隻要您想要與字型大小成比例的東西,ems就會派上用場,如下所示：

h1.title {

font-size: 2em;

width: 20em;

background-color: #d00d1e;

}

@media (min-width: 400px) {

h1 {

font-size: 2.5em;

}

}

或者您可能希望限制行長度以便于閱讀：

p {

max-width: 42em;

}

另外,正如其他評論中所提到的,px仍适用于邊界和類似的東西.它也可以用于填充,特别是當你将它與盒子大小配對時：

.example {

width: 80%;

Box-sizing: border-Box;

padding: 10px;

}