Relative Measurements
以px为单位的尺寸是 exact dimensions。例如，若你设定一个div为500px宽，100px高，当屏幕尺寸改变时，它肯能会显得太小，或溢出屏幕，进而难以阅读。故px也被称为hard coded measurements。
为避免它，你可以使用 relative measurements 来代替。 Relative measurements 可以使得 the proportions of a website to remain intact regardless of screen size or layout.
Em
其中一个可以创造relatively-sized content的单位是em，它表示base font的大小。
例如，通常浏览器的默认base font是16px，故1em=16px，2em=32px，以此类推。
上例中，没有指定base font是多大，因此heading elements 的大小将以浏览器默认大小为基准。如果the default font size is 16 pixels, then the font size of the heading element will be 32 pixels.
上例展示了使用em时，如何摆脱浏览器默认值（16px/em)。在 splash-section element 内，所有文本内容的base font 被设为18px。
在下一条CSS语句中，all h1 elements inside of splash-section 将以 the base font of splash-section (18 pixels)为基准来设定大小。故 h1 elements 是27px。
Rem
CSS中第二个 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.
大多数浏览器的把<html>的font size设为16px，故默认情况下，1rem=16px。若需设置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的优势是all elements的字体大小都基于同一个font size value（默认是16px）。如果你需要统一调整网页上所有elements的大小，rem是最好的选择;如果你只需统一调整某一parent element的内的所有子元素的大小，则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 代表两个divs，后者被嵌套在前者内。The parent div (.main)已被设定了固定的尺寸，故当使用 percentages 时，将以父元素设定的尺寸为基准进行百分换算。Therefore, the dimensions of the .subsection div will be 150 pixels tall and 250 pixels wide.
当父元素没被设定尺寸时，子元素使用percentages将会出错。
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 也可以用来设定 the padding and margin of elements.
当我们用 percentages 来设定 height and width 时， you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.
而当使用 percentages 来设定 padding and margin 时，其基准 based only on the width of the parent element.
例如，假设 margin-left 属性被设为a percentage ，如：50%，则该元素将向右移动至其父级元素内中间处。
Vertical padding and margin 若被设为 percentages 也是依据 the width of the parent. 为什么？想象以下场景：
存在 a container div（父级），但是未被设定高度。其内部有a child element，但 child element 有 height。
这将导致 parent container 的 height 根据child element 的 height 来撑。一旦子元素高度改变，父级元素高度也将随之变化。
这种变化在子元素高度变化时永远存在。
在以上场景中，父级元素若未被设定height，子元素高度变化时其高度也必然改变。这也是为什么 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.
当使用相对尺寸（relative sizing）时， ems and rems 应被用于设定文字的大小，或页面上有关文字的一些尺寸（如文字周围的padding），这使得有关文字尺寸的布局具有一致性。否则，应使用percentages。
Width: Minimum & Maximum
尽管 relative measurements 在不同屏幕尺寸下提供了 consistent layouts ，但视窗太小或太大时，网页 elements 也会丢失其完整性（integrity）。你可以通过一下两个属性限制 elements 的 width。
min-width — ensures a minimum width for an element.
max-width — ensures a maximum width for an element.
上例中，当视窗大小改变时，p元素的width不会小于300px，且不会大于600px。
在浏览器视窗改变时，这两个properties保证了 text 的可读性，否则text会变得either very compressed or very spread out。
Height: Minimum & Maximum
你也可以限制一个元素的最大/最小高度。
min-height — ensures a minimum height for an element’s box.
max-height — ensures a maximum height for an element’s box.
p元素的height在150px~300px之间
如果一个元素的 max-height property 设置得过小，则其content 将会溢出，溢出部分将不可见。
Scaling Images and Videos
很多网站都会包含images and videos，为保证其易读性，以原比例显示它们尤为重要。
上例中，.container 代表 a container div。其 width 被设为50%（浏览器width的一半），height为200px。overflow 被设为 hidden 使得任何超出此 container 范围的 content 不可见。
第二个CSS规则使得 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.
上例值得记住，因为它代表了一种等比例排布images and videos 的设计样式。
上例中，an image (or video)的 width 被改变至等同于 the width of a container。如果image大于container，image 纵向超出的部分将会 overflow 且不展示。为避免这种情况，你可以设置max-height to 100% and width to auto（本质上是属性的对调）。这将使 image 的height 等于container 的 height。如果image大于container，横向超出部分将会 overflow 且不展示。
Scaling Background Images
背景图片也可以改变大小。
上例中，第一行表示设置了背景图（# 是代表 an image URL 的一个占位符）。第二行表示图片不repreat（默认是repeat）。第三行使得图片在 element 内居中。
第四行是上例的核心，它定义了如何改变背景图的大小。图片将 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.
网友评论