HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 12. BOX MODEL 135


em: Horizontal distance can be measured in “em”s, where one em is the
width of the letter m in the current font.


The size of the em defines the size of the font. If the em is 12pt wide, then
you have a 12pt font.


ex: Vertical distance can sometimes be measured in “ex”s, where one ex is
the height of the letter x in the current font. An ex defaults to the size of
half of an em if it cannot be determined from the font.


ch: Horizontal distance between the centers of adjacent digits in numbers.
Technically this is the distance between the centers of adjacent zeros, but as
all numbers are typically the same distance center to center, it also describes
the distance between any two digits.


12.4.5 Viewport Percentages: vw, vh, vmin, vmax


Some, likevw,vh,vmin, andvmaxare designed to scale up or down
according to the size of theviewport, which is the browser window.


vw: Viewport Width. There are 100 units in the total width of the viewport.
50vw is the horizontal middle of the browser window.


Exam Question 244(p.350): What CSS measurement unit is based on
how wide the browser window is?
Required Answer:vw


vh: Viewport Height. There are 100 units in the total height of the viewport.
50vh is the vertical middle of the browser window.


Exam Question 245(p.350): What CSS measurement unit is based on
how tall the browser window is?
Required Answer:vh


vmin: Viewport Minimum. This is the smaller of vw and vh. In portrait
mode, vw is smaller. In landscape mode, vh is smaller.


vmax: Viewport Maximum. This is the larger of vw and vh. In portrait
mode, vh is larger. In landscape mode, vw is larger.

Free download pdf