Relative Measurements
以px為單位的尺寸是?exact?dimensions。例如，若你設(shè)定一個(gè)div為500px寬，100px高，當(dāng)屏幕尺寸改變時(shí)，它肯能會(huì)顯得太小，或溢出屏幕，進(jìn)而難以閱讀。故px也被稱為hard coded measurements。
為避免它，你可以使用?relative measurements?來代替。?Relative measurements 可以使得?the proportions of a website to remain intact regardless of screen size or layout.
Em
其中一個(gè)可以創(chuàng)造relatively-sized content的單位是em，它表示base font的大小。
例如，通常瀏覽器的默認(rèn)base font是16px，故1em=16px，2em=32px，以此類推。
上例中，沒有指定base font是多大，因此heading elements 的大小將以瀏覽器默認(rèn)大小為基準(zhǔn)。如果the default font size is 16 pixels, then the font size of the?heading?element will be 32 pixels.
上例展示了使用em時(shí)，如何擺脫瀏覽器默認(rèn)值（16px/em)。在?splash-section?element 內(nèi)，所有文本內(nèi)容的base font 被設(shè)為18px。
在下一條CSS語句中，all?h1?elements inside of?splash-section 將以?the base font of?splash-section?(18 pixels)為基準(zhǔn)來設(shè)定大小。故 h1 elements 是27px。
Rem
CSS中第二個(gè)?relative unit of measurement 是rem。
Rem stands for?root em. It acts similar to em, but instead of checking parent elements to size font, it checks the?root element. The root element is the?<html>?tag.
大多數(shù)瀏覽器的把<html>的font size設(shè)為16px，故默認(rèn)情況下，1rem=16px。若需設(shè)置a different font size for the root element, you can add a CSS rule.
上例中，?the font size of the root element,?<html>, is set to 20 pixels.?All subsequent rem measurements will now be compared to that value and the size of?h1?elements in the example will be 40 pixels.
One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear. If you are interested in sizing elements consistently across an entire website, the rem measurement is the best unit for the job. If you’re interested in sizing elements in comparison to other elements nearby, then the em unit would be better suited for the job.
使用rems的優(yōu)勢(shì)是all elements的字體大小都基于同一個(gè)font size value（默認(rèn)是16px）。如果你需要統(tǒng)一調(diào)整網(wǎng)頁上所有elements的大小，rem是最好的選擇;如果你只需統(tǒng)一調(diào)整某一parent element的內(nèi)的所有子元素的大小，則em更合適。
Percentages: Height & Width
To size non-text HTML elements relative to their parent elements on the page you can use?percentages.
Percentages are often used to size box-model values, like width and height, padding, border, and margins. They can also be used to set positioning properties (top, bottom, left, right).
上例中，.main?and?.subsection 代表兩個(gè)divs，后者被嵌套在前者內(nèi)。The parent div (.main)已被設(shè)定了固定的尺寸，故當(dāng)使用?percentages 時(shí)，將以父元素設(shè)定的尺寸為基準(zhǔn)進(jìn)行百分換算。Therefore, the dimensions of the?.subsection?div will be 150 pixels tall and 250 pixels wide.
當(dāng)父元素沒被設(shè)定尺寸時(shí)，子元素使用percentages將會(huì)出錯(cuò)。
Note:?Because the box model includes padding, borders, and margins, setting an element’s?width?to?100%?may cause content to overflow its parent container. While tempting,?100%?should only be used when content will not have padding, border, or margin.
Percentages: Padding & Margin
Percentages 也可以用來設(shè)定 the padding and margin of elements.
當(dāng)我們用?percentages 來設(shè)定?height and width 時(shí)，?you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.
而當(dāng)使用?percentages?來設(shè)定?padding and margin 時(shí)，其基準(zhǔn)?based only on the?width?of the parent element.
例如，假設(shè)?margin-left 屬性被設(shè)為a percentage ，如：50%，則該元素將向右移動(dòng)至其父級(jí)元素內(nèi)中間處。
Vertical padding and margin 若被設(shè)為 percentages 也是依據(jù)?the width of the parent. 為什么？想象以下場(chǎng)景：
存在 a container div（父級(jí)），但是未被設(shè)定高度。其內(nèi)部有a child element，但?child element 有 height。
這將導(dǎo)致?parent container 的 height 根據(jù)child element 的 height 來撐。一旦子元素高度改變，父級(jí)元素高度也將隨之變化。
這種變化在子元素高度變化時(shí)永遠(yuǎn)存在。
在以上場(chǎng)景中，父級(jí)元素若未被設(shè)定height，子元素高度變化時(shí)其高度也必然改變。這也是為什么?vertical padding and margin 仍基于?the width of the parent,而非其height。
Note:?When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.
當(dāng)使用相對(duì)尺寸（relative sizing）時(shí)，?ems and rems?應(yīng)被用于設(shè)定文字的大小，或頁面上有關(guān)文字的一些尺寸（如文字周圍的padding），這使得有關(guān)文字尺寸的布局具有一致性。否則，應(yīng)使用percentages。
Width: Minimum & Maximum
盡管?relative measurements 在不同屏幕尺寸下提供了?consistent layouts ，但視窗太小或太大時(shí)，網(wǎng)頁?elements 也會(huì)丟失其完整性（integrity）。你可以通過一下兩個(gè)屬性限制 elements 的 width。
min-width?— ensures a minimum width for an element.
max-width?— ensures a maximum width for an element.
上例中，當(dāng)視窗大小改變時(shí)，p元素的width不會(huì)小于300px，且不會(huì)大于600px。
在瀏覽器視窗改變時(shí)，這兩個(gè)properties保證了?text 的可讀性，否則text會(huì)變得either very compressed or very spread out。
Height: Minimum & Maximum
你也可以限制一個(gè)元素的最大/最小高度。
min-height?— ensures a minimum height for an element’s box.
max-height?— ensures a maximum height for an element’s box.
如果一個(gè)元素的?max-height property 設(shè)置得過小，則其content 將會(huì)溢出，溢出部分將不可見。
Scaling Images and Videos
很多網(wǎng)站都會(huì)包含images and videos，為保證其易讀性，以原比例顯示它們尤為重要。
上例中，.container 代表?a container div。其 width 被設(shè)為50%（瀏覽器width的一半），height為200px。overflow 被設(shè)為 hidden 使得任何超出此 container 范圍的 content 不可見。
第二個(gè)CSS規(guī)則使得?images scale（改變大?。?with the width of the container.?The?height?property is set to?auto, meaning an image’s height will?automatically?scale proportionally with the width. Finally, the last line will display images as block level elements (rather than inline-block, their default state). This will prevent images from attempting to align（排成一行） with other content on the page (like text), which can add unintended margin to the images.
上例值得記住，因?yàn)樗砹艘环N等比例排布images and videos 的設(shè)計(jì)樣式。
上例中，an image (or video)的 width 被改變至等同于?the width of a container。如果image大于container，image 縱向超出的部分將會(huì) overflow 且不展示。為避免這種情況，你可以設(shè)置max-height?to?100%?and?width?to?auto（本質(zhì)上是屬性的對(duì)調(diào)）。這將使 image 的height 等于container 的 height。如果image大于container，橫向超出部分將會(huì) overflow 且不展示。
Scaling Background Images
背景圖片也可以改變大小。
上例中，第一行表示設(shè)置了背景圖（# 是代表 an image URL 的一個(gè)占位符）。第二行表示圖片不repreat（默認(rèn)是repeat）。第三行使得圖片在 element 內(nèi)居中。
第四行是上例的核心，它定義了如何改變背景圖的大小。圖片將?cover?the entire background of the element，?all while keeping the image in proportion.如果圖片尺寸超出container的尺寸，則將只展示圖片的一部分。
Review: Relative Measurements
Content on a website can be sized relative to other elements on the page using?relative measurements.
The unit of?em?sizes font relative to the font size of a parent element.
The unit of?rem?sizes font relative to the font size of a root element. That root element is the?<html>?element.
Percentages are commonly used to size box-model features, like the width, height, padding, or margin of an element.
When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set).
Percentages can be used to set padding and margin. Horizontal and vertical padding and margin are set relative to the width of a parent element.
The minimum and maximum width of elements can be set using?min-width?and?max-width.
The minimum and maximum height of elements can be set using?min-height?and?max-height.
When the height of an image or video is set, then its width can be set to?auto?so that the media scales proportionally. Reversing these two properties and values will also achieve the same result.
A background image of an HTML element will scale proportionally when its?background-size?property is set to?cover.
