-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path23.txt
More file actions
59 lines (45 loc) · 4.41 KB
/
23.txt
File metadata and controls
59 lines (45 loc) · 4.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// CSS units of measurement
A web page, as you know it, is two-dimensional. In other words, it has width and height. There are a number of other ways you
can express this such as vertical and horizontal, length and breadth, x and y axis and so on. Another property of a web page is
its size which can either be static or dynamic. When you’ve encountered enough CSS code, you will note a number of different
ways in which the values for the same property can be declared using different units of measurement. Most of these units of
measurement are used to account for the dynamism and dimensionality of a web page.
Let’s examine the most widely used units of measurement. They can broadly be categorized as Absolute and Relative units.
# Absolute units
Absolute units are constant across different devices and have a fixed size. They are useful for activities like printing a page.
They are not so suitable when it comes to the wide variety of devices in use today that have different viewport sizes. Because
of this, absolute units are used when the size of the web page is known and will remain constant.
The table for absolute units can be seen below:
Unit Name Comparison
Q Quarter-millimeters 1Q = 1/40th of 1cm
mm Millimeters 1mm = 1/10th of 1cm
cm Centimeters 1cm = 37.8px = 25.2/64in
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72nd of 1in
px Pixels 1px = 1/96th of 1in
# Relative values
When you create a web page, you will almost never have only a single element present inside it. Even in case of containers such
as flexboxes and grids, there’s usually more than one element present that rules are applied to. Relative values are defined ‘in
relation’ to the other elements present inside the parent element. Additionally, they are defined ‘in relation’ to the viewport
or the size of the visible web page. Given the dynamic nature of web pages today and the variable size of devices in use,
relative units are the go-to option in many cases. Below is a list of some of the important relative units.
Unit Description and relativity
em Font size of the parent where present.
ex x-co-ordinate or height of the font element.
ch Width of the font character.
rem Font size of the root element.
lh Value computed for line height of parent element.
rlh Value computed for line height of root element which is <html>.
vw 1% of the viewport width.
vh 1% of the viewport height.
vmin 1% of the smaller dimension of viewport.
vmax 1% of the larger dimension of viewport.
% Denotes a percentage value in relation to its parent element.
Many of these units are used in terms of the relative size of fonts. Some units are more suitable depending on the relative
context. Like when the dimensions of the viewport are important, it's more appropriate to use vw and vh. In a broader context,
the relative units you will see most frequently used are percentage, em, vh, vw and rem.
Much like the absolute and relative units discussed above, certain properties have their own set of acceptable values that need
to be taken into account. For example, color-based properties such as backgroundcolor will have values such as hexadecimal, rgb(),
rgba(), hsl(), hsla() and so on. Each property should be explored on an individual basis and practicing with the code will help
you to decide which of these units of measurement are the most suitable choice.