Responsive Web Design Flashcards
1
Q
Columns
A
Columns are defined as the vertical sections that span the width of a page. In web design, it’s common to see layouts consisting of 12 or 16 columns, while other may only feature three columns. Defining the number of columns depends on what’s appropriate for your design, device, and or screen viewing size. They can be dependent on each other, meaning they are used to organize related content such as a continuation of a paragraph. They can also be independent of each other, meaning they are used for organizing the layout of unrelated content such as a sidebar. This allows for the flexibility of organizing information.
2
Q
Name three major components of the grid anatomy
A
When designing a website, the grid comprises three major components: columns, gutters, and margins.
3
Q
Gutters
A
a gutter is the negative space between each column. Gutters help in ensuring the columns don’t run together, which would negate the purpose of using a column-based grid. No content can spill into the gutter unless it is using the next column.
4
Q
Margins
A
Margins appear on the left and right sides of the column-based grid. These ensure the content of your designs doesn’t match up to the edges of the browser window.
It’s important to note, margins may vary depending on the width of the grid, browser window, or device. For larger displays, margins may be very noticeable while on smaller screens, they may have the same width as a gutter.
5
Q
Grid rows
A
Rows are the horizontal lines on a grid. Think of rows as invisible boxes that group content together by height. Rows are commonly used in web designs to group content together and re-order other content to allow for more whitespace.
6
Q
What’s the difference between display: flex; and display: inline-flex;?
A
Much like the difference between display: block; and display: inline;, the main difference between display: flex; and display: inline-flex; is that display: inline-flex; will make the flex container an inline element while its content maintains its flexbox properties.
7
Q
flex-start (justify-content property)
A
all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
8
Q
five commonly used values for the justify-content property
A
flex-start
flex-end
center
space-around
space-between
9
Q
flex-end (justify-content property)
A
all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
10
Q
center (justify-content property)
A
all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
11
Q
space-around (justify-content property)
A
items will be positioned with equal space before and after each item, resulting in double the space between elements.
12
Q
space-between (justify-content property)
A
items will be positioned with equal space between them, but no extra space before the first or after the last elements.
13
Q
five commonly used values for the align-items property
A
flex-start
flex-end
center
baseline
stretch
14
Q
flex-start (align-items property)
A
all elements will be positioned at the top of the parent container.
15
Q
flex-end (align-items property)
A
all elements will be positioned at the bottom of the parent container.
16
Q
center (align-items property)
A
the center of all elements will be positioned halfway between the top and bottom of the parent container.
17
Q
baseline (align-items property)
A
the bottom of the content of all items will be aligned with each other.
18
Q
stretch (align-items property)
A
if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).
19
Q
flex-grow
A
The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others. the default value of flex-grow is 0. Margins are unaffected by flex-grow and flex-shrink.
20
Q
flex-shrink
A
the flex-shrink property can be used to specify which elements will shrink and in what proportions. the default value of flex-shrink is 1, and this causes the flex items to shrink when the flex container is too small, even though we do not declare the property. Margins are unaffected by flex-grow and flex-shrink.
21
Q
flex-basis
A
flex-basis allows us to specify the width of an item before it stretches or shrinks.
22
Q
Is flex-basis the same as setting width?
A
It’s not! We can think of flex-basis as the width OR height (depending on flex-direction) of our flex items before they are constrained by a flex container.
23
Q
flex (property)
A
The shorthand flex property provides a convenient way for specifying how elements stretch and shrink, while simplifying the CSS required. The flex property allows you to declare flex-grow, flex-shrink, and flex-basis all in one line.
Note: The flex property is different from the flex value used for the display property.
24
Q
Give an example of declaring declare flex-grow, flex-shrink, and flex-basis all in one line.
A
.small {
flex: 1 2 100px;
}
25
Give a few instances where using the shorthand flex property is unnecessary to use:
- To set only the flex-basis and use the default flex-shrink: 1;
- To set only the flex-basis and flex-shrink properties without specifying a flex-grow value as well, because we cannot set flex-shrink and flex-basis using two values for the flex property
- To use only flex-shrink or flex-basis, we can however set flex-grow if we use a single value on the flex property
26
flex-wrap property
Sometimes, we don’t want our content to shrink to fit its container. Instead, we might want flex items to move to the next line when necessary. This can be declared with the flex-wrap property.
Note: The flex-wrap property is declared on flex containers.
27
Give the three values of the flex-wrap property
wrap
wrap-reverse
nowrap
28
wrap (flex-wrap value)
child elements of a flex container that don’t fit into a row will move down to the next line
29
wrap-reverse (flex-wrap value)
the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
30
nowrap (flex-wrap value)
prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
31
align-content
If a flex container has multiple rows of content, we can use align-content to space the rows from top to bottom.
Note: The align-content property is declared on flex containers.
32
Give the more commonly used align-content values?
flex-start
flex-end
center
space-between
space-around
stretch
33
flex-start (align-content value)
all rows of elements will be positioned at the top of the parent container with no extra space between.
34
flex-end (align-content value)
all rows of elements will be positioned at the bottom of the parent container with no extra space between.
35
center (align-content value)
all rows of elements will be positioned at the center of the parent element with no extra space between.
36
space-between (align-content value)
all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
37
space-around (align-content value)
all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
38
stretch (align-content value)
if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).
39
Name the axes of the flex containers.
flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.
40
Explain the main axis and what it is used for.
The main axis is horizontal. The main axis is used to position flex items with the following properties:
justify-content
flex-wrap
flex-grow
flex-shrink
41
Explain the cross axis and what it is used for.
The cross axis is vertical. The cross axis is used to position flex items with the following properties:
align-items
align-content
42
Name which properties we position using the main axis.
The main axis is used to position flex items with the following properties:
justify-content
flex-wrap
flex-grow
flex-shrink
43
Name which properties we position using the cross axis.
The cross axis is used to position flex items with the following properties:
align-items
align-content
44
flex-direction property
This property makes the main axis and cross axis be interchangeable. We can switch them using this property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.
Note: The flex-direction property is declared on flex containers.
45
Name the four values of the flex-direction property
The flex-direction property can accept four values:
row
row-reverse
column
column-reverse
46
row (flex-direction)
elements will be positioned from left to right across the parent element starting from the top left corner (default).
47
row-reverse (flex-direction)
elements will be positioned from right to left across the parent element starting from the top right corner.
48
column (flex-direction)
elements will be positioned from top to bottom of the parent element starting from the top left corner.
49
column-reverse (flex-direction)
elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.
50
Why would we use flex-direction: row-reverse/column-reverse;?
The use of flex-direction: row-reverse/column-reverse; will mostly be decided by design/layout specifications for our site, however, a couple great use cases:
altering the order of flex items with CSS instead of JavaScript, for example: clicking a sort button could switch order of elements from ascending to descending
altering the order of flex items for CSS animations/transitions/effects
51
flex-flow
Like the shorthand flex property, the shorthand flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.
The first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.
Note: The flex-flow property is declared on flex containers.
52
CSS Flexbox
The CSS display: flex property sets an HTML element as a block level flex container which takes the full width of its parent container. Any child elements that reside within the flex container are called flex items.
Flex items change their size and location in response to the size and position of their parent container.
div {
display: flex;
}
53
justify-content Property
The CSS justify-content flexbox property defines how the browser distributes space between and around content items along the main-axis of their container. This is when the content items do not use all available space on the major-axis (horizontally).
div {
display: flex;
justify-content: center;
}
54
Values of justify-content
justify-content can have the values of:
flex-start
flex-end
center
space-between
space-around
55
flex Property
The flex CSS property specifies how a flex item will grow or shrink so as to fit within the space available in its flex container. This is a shorthand property that declares the following properties in order on a single line:
flex-grow
flex-shrink
flex-basis
/* Three properties declared on three lines: */
.first-flex-item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
/* Same three properties declared on one line: */
.first-flex-item {
flex: 2 1 150px;
}
56
flex-direction Property
The flex-direction CSS property specifies how flex items are placed in the flex container - either vertically or horizontally. This property also determines whether those flex items appear in order or in reverse order.
57
align-content Property
The align-content property modifies the behavior of the flex-wrap property. It determines how to space rows from top to bottom (ie. along the cross axis). Multiple rows of items are needed for this property to take effect.
58
flex-grow Property
The CSS flex-grow property allows flex items to grow as the parent container increases in size horizontally. This property accepts numerical values and specifies how an element should grow relative to its sibling elements based on this value.
The default value for this property is 0.
.panelA {
width: 100px;
flex-grow: 1;
}
/* This panelB element will stretch twice wider than the panelA element */
.panelB {
width: 100px;
flex-grow: 2;
}
59
flex-shrink Property
The CSS flex-shrink property determines how an element should shrink as the parent container decreases in size horizontally. This property accepts a numerical value which specifies the ratios for the shrinkage of a flex item compared to its other sibling elements within its parent container.
The default value for this property is 1.
.container {
display: flex;
}
.item-a {
flex-shrink: 1;
/* The value 1 indicates that the item should shrink. */
}
.item-b {
flex-shrink: 2;
/* The value 2 indicates that the item should shrink twice than the element item-a. */
}
60
Css flex-basis property
The flex-basis CSS property sets the initial base size for a flex item before any other space is distributed according to other flex properties.
// Default Syntax
flex-basis: auto;
61
The CSS flex-flow property
The CSS property flex-flow provides a shorthand for the properties flex-direction and flex-wrap. The value of the flex-direction property specifies the direction of the flex items and the value of the flex-wrap property allows flex items to move to the next line instead of shrinking to fit inside the flex container. The flex-flow property should be declared on the flex container.
// In this example code block, "column" is the value of the property "flex-direction" and "wrap" is the value of the property "flex-wrap".
.container {
display: flex;
flex-flow: column wrap;
}
62
CSS display: inline-flex property
The CSS display: inline-flex property sets an HTML element as an inline flex container which takes only the required space for the content. Any child elements that reside within the flex container are called flex items. Flex items change their size and location in response to the size and position of their parent container.
.container{
display: inline-flex;
}
63
Flexbox Properties align-items
When working with CSS flexbox align-items is used to align flex items vertically within a parent container.
64
Css flex-wrap property
The flex-wrap property specifies whether flex items should wrap or not. This applies to flex items only. Once you tell your container to flex-wrap, wrapping become a priority over shrinking. Flex items will only begin to wrap if their combined flex-basis value is greater than the current size of their flex container.
.container {
display: flex;
flex-wrap: wrap;
width: 200px;
}
65
How do we decide when to use flexbox?
When deciding whether to use flexbox or not we should consider a few things:
Can the scaling, spacing, alignment, or ordering issue be solved using more basic CSS? If so we should not use flexbox.
Do we want to use flexbox to create an entire page layout? If yes, consider using other CSS tools, like CSS Grid, in conjunction with flexbox - as flexbox is not designed to create entire page layouts.
Do we need an easy way to align, control spacing, scale, and/or order items in a vertical or horizontal direction within a container? Use flexbox!
66
Some common use cases for flexbox:
- page navigation, including spacing items and stretching/shrinking items as desired
- centering items easily
- easily flipping content or switching the order of content
67
What is the order of four values separated by slashes in grid area?
This is how grid-area will interpret those values.
grid-row-start
grid-column-start
grid-row-end
grid-column-end
68
grid-template-columns
grid-template-columns defines the number and sizes of the columns of the grid
69
grid-template-rows
grid-template-rows defines the number and sizes of the rows of the grid
70
grid-template
grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
71
row-gap
row-gap puts blank space between the rows of the grid
72
column-gap
column-gap puts blank space between the columns of the grid
73
gap
gap is a shorthand for defining both row-gap and column-gap in one line
74
grid-row-start and grid-row-end
grid-row-start and grid-row-end makes elements span certain rows of the grid
75
grid-column-start and grid-column-end
grid-column-start and grid-column-end makes elements span certain columns of the grid
76
grid-area
grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line
77
Grid Template Columns
To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).
#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}
78
fr Relative Unit
The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.
/*
In this example, the second column take 60px of the avaiable 100px so the first and third columns split the remaining available 40px into two parts (`1fr` = 50% or 20px)
*/
.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}
79
Grid Gap
The CSS grid-gap property is a shorthand way of setting the two properties grid-row-gap and grid-column-gap. It is used to determine the size of the gap between each row and each column. The first value sets the size of the gap between rows and while the second value sets the size of the gap between columns.
// The distance between rows is 20px
// The distance between columns is 10px
#grid-container {
display: grid;
grid-gap: 20px 10px;
}
80
CSS Block Level Grid
CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a block-level grid container use display: grid property/value. The nested elements inside this element are called grid items.
#grid-container {
display: grid;
}
81
CSS grid-row
The CSS grid-row property is shorthand for the grid-row-start and grid-row-end properties specifying a grid item’s size and location within the grid row. The starting and ending row values are separated by a /. There is a corresponding grid-column property shorthand that implements the same behavior for columns.
/*CSS Syntax */
grid-row: grid-row-start / grid-row-end;
/*Example*/
.item {
grid-row: 1 / span 2;
}
82
CSS Inline Level Grid
CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a inline-level grid container use display: inline-grid property/value. The nested elements inside this element are called grid items.
The difference between the values inline-grid and grid is that the inline-grid will make the element inline while grid will make it a block-level element.
#grid-container {
display: inline-grid;
}
83
minmax() Function
The CSS Grid minmax() function accepts two parameters:
The first parameter is the minimum size of a row or column.
The second parameter is the maximum size.
The grid must have a variable width for the minmax() function.
If the maximum value is less than the minimum, then the maximum value is ignored and only the minimum value is used.
The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.
/* In this example, the second column will vary in size between 100px and 500px depending on the size of the web browser" */
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}
84
grid-row-start & grid-row-end
The CSS grid-row-start and grid-row-end properties allow single grid items to take up multiple rows. The grid-row-start property defines on which row-line the item will start. The grid-row-end property defines how many rows an item will span, or on which row-line the item will end. The keyword span can be used with either property to automatically calculate the ending value from the starting value or vice versa. There are complementary grid-column-start and grid-column-end properties that apply the same behavior to columns.
/* CSS syntax:
grid-row-start: auto|row-line;
grid-row-end: auto|row-line|span n;
*/
grid-row-start: 2;
grid-row-end: span 2;
85
CSS grid-row-gap
The CSS grid-row-gap property determines the amount of blank space between each row in a CSS grid layout or in other words, sets the size of the gap (gutter) between an element’s grid rows. The grid-column-gap provides the same functionality for space between grid columns.
/*CSS Syntax */
grid-row-gap: length; /*Any legal length value, like px or %. 0 is the default value*/
86
CSS grid-area
The CSS grid-area property specifies a grid item’s size and location in a grid layout and is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end in that order. Each value is separated by a /.
In the included example, Item1 will start on row 2 and column 1, and span 2 rows and 3 columns
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
87
Justify Items
The justify-items property is used on a grid container. It’s used to determine how the grid items are spread out along a row by setting the default justify-self property for all child boxes.
The value start aligns grid items to the left side of the grid area.
The value end aligns grid items to the right side of the grid area.
The value center aligns grid items to the center of the grid area.
The value stretch stretches all items to fill the grid area.
#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
88
Align Self
The CSS align-self property is used to set how an individual grid item positions itself along the column or block axis. By default grid items inherit the value of the align-items property on the container. So if the align-self value is set, it would over-ride the inherited align-items value.
The value start positions grid items on the top of the grid area.
The value end aligns the grid on the bottom of the grid area.
The value center positions grid items on the center of the grid area.
The value stretch positions grid items to fill the grid area (default).
89
CSS grid-template-areas
The CSS grid-template-areas property allows the naming of sections of a webpage to use as values in the grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties. They specify named grid areas within a CSS grid.
/* Specify two rows, where "item" spans the first two columns in the first two rows (in a four column grid layout)*/
.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}
90
CSS grid-auto-flow
The CSS grid-auto-flow property specifies whether implicity-added elements should be added as rows or columns within a grid or, in other words, it controls how auto-placed items get inserted in the grid and this property is declared on the grid container.
The value row specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default).
The value column specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements.
The value dense invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added.
/*CSS Syntax */
grid-auto-flow: row|column|dense|row dense|column dense;
91
Justify Content
Sometimes the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property justify-content can be used to position the entire grid along the row or inline axis of the grid container.
The value start aligns the grid to the left side of the grid container.
The value end aligns the grid to the right side of the grid container.
The value center centers the grid horizontally in the grid container.
The value stretch stretches the grid items to increase the size of the grid to expand horizontally across the container.
The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.
The value space-between includes an equal amount of space between grid items and no space at either end.
The value space-evenly places an even amount of space between grid items and at either end.
92
Align Content
Some times the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property align-content can be used to position the entire grid along the column axis of the grid container.
The property is declared on the grid container.
The value start aligns the grid to the top of the grid container.
The value end aligns the grid to the bottom of the grid container.
The value center centers the grid vertically in the grid container.
The value stretch stretches the grid items to increase the size of the grid to expand vertically across the container.
The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.
The value space-between includes an equal amount of space between grid items and no space at either end.
The value space-evenly places an even amount of space between grid items and at either end.
93
CSS grid-auto-rows
The CSS grid-auto-rows property specifies the height of implicitly added grid rows or it sets a size for the rows in a grid container. This property is declared on the grid container. grid-auto-columns provides the same functionality for columns. Implicitly-added rows or columns occur when there are more grid items than cells available.
grid-auto-rows and grid-auto-columns accept the same values as their explicit counterparts, grid-template-rows and grid-template-columns:
pixels (px)
percentages (%)
fractions (fr)
the repeat() function
94
Justify Self
The CSS justify-self property is used to set how an individual grid item positions itself along the row or inline axis. By default grid items inherit the value of the justify-items property on the container. So if the justify-self value is set, it would over-ride the inherited justify-items value.
The value start positions grid items on the left side of the grid area.
The value end positions the grid items on the right side of the grid area.
The value center positions grid items on the center of the grid area.
The value stretch positions grid items to fill the grid area (default).
// The grid items are positioned to the right (end) of the row.
#grid-container {
display: grid;
justify-items: start;
}
.grid-items {
justify-self: end;
}
95
CSS grid-area
The CSS grid-area property allows for elements to overlap each other by using the z-index property on a particular element which tells the browser to render that element on top of the other elements.
96
Align Items
The align-items property is used on a grid container. It’s used to determine how the grid items are spread out along the column by setting the default align-self property for all child grid items.
The value start aligns grid items to the top side of the grid area.
The value end aligns grid items to the bottom side of the grid area.
The value center aligns grid items to the center of the grid area.
The value stretch stretches all items to fill the grid area.
#container {
display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
97
Implicit grid
The implicit grid is an algorithm built into the specification for CSS Grid that determines default behavior for the placement of elements when there are more than fit into the grid specified by the CSS.
The default behavior of the implicit grid is as follows: items fill up rows first, adding new rows as necessary. New grid rows will only be tall enough to contain the content within them.
98
grid-auto-columns
The CSS grid-auto-columns property specifies the width of implicitly added grid columns or it sets a size for the columns in a grid container. This property is declared on the grid container. grid-auto-rows provides the same functionality for rows . Implicitly-added rows or columns occur when there are more grid items than cells available.
grid-auto-columns and grid-auto-rows accept the same values as their explicit counterparts, grid-template-columns and grid-template-rows:
pixels (px)
percentages (%)
fractions (fr)
the repeat() function
99
grid-template-areas
grid-template-areas specifies grid named grid areas
100
grid layout axes
grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.
101
justify-items (grid)
justify-items specifies how individual elements should spread across the row axis
102
justify-content (grid)
justify-content specifies how groups of elements should spread across the row axis
103
justify-self (grid)
justify-self specifies how a single element should position itself with respect to the row axis
104
align-items (grid)
align-items specifies how individual elements should spread across the column axis
105
align-content (grid)
align-content specifies how groups of elements should spread across the column axis
106
align-self (grid)
align-self specifies how a single element should position itself with respect to the column axis
107
grid-auto-rows
grid-auto-rows specifies the height of rows added implicitly to the grid
108
grid-auto-columns
grid-auto-columns specifies the width of columns added implicitly to the grid
109
grid-auto-flow
grid-auto-flow specifies in which direction implicit elements should be created
110
Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?
.grid {
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
}
The answer is 100px, because the grid is impacted by what is known as grid-auto-flow. The default of grid-auto-flow is row, which means that the new items will be added to the new rows from left to right - and this means it will be in the first column as third from the top.
111
Responsive design
Responsive design refers to the ability of a website to resize and reorganize its content based on:
The size of other content on the website.
The size of the screen the website is being viewed on.
112
em
Historically, the em represented the width of a capital letter M in the typeface and size being used. That is no longer the case.
Today, the em represents the font-size of the current element or the default base font-size set by the browser if none is given. For example, if the base font of a browser is 16 pixels (which is normally the default size of text in a browser), then 1 em is equal to 16 pixels. 2 ems would equal 32 pixels, and so on.
113
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 tag.
Most browsers set the font size of to 16 pixels, so by default rem measurements will be compared to that value. To set a different font size for the root element, you can add a CSS rule.
114
What is the difference between em and rem?
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.
115
percentages (responsive sizing)
percentages can be used to size non-text HTML elements relative to their parent elements on the page.
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).
116
Why shouldn't we use 100% to set the element's width?
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.
117
What is the difference between using percentages to size box-values and padding/margins?
When height and width are set using percentages, the dimensions of child elements are calculated based on the dimensions of the parent element.
When percentages are used to set padding and margin, however, they are calculated based only on the width of the parent element.
For example, when a property like margin-left is set using a percentage (say 50%), the element will be moved halfway to the right in the parent container (as opposed to the child element receiving a margin half of its parent’s margin). Vertical padding and margin are also calculated based on the width of the parent.
118
How should we use the relative measurements of ems, rems and percentages to size websites?
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.
119
Give the best example of code that we should use to scale images and video proprotionately. Then, explain the example.
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
display: block;
}
In the example above, .container represents a container div. It is set to a width of 50% (half of the browser’s width, in this example) and a height of 200 pixels. Setting overflow to hidden ensures that any content with dimensions larger than the container will be hidden from view.
The second CSS rule ensures that 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.
The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display.
120
How can we set up scaling the height of the image/video with the height of the container? Give an example and explain it.
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-height: 100%;
width: auto;
display: block;
}
This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display.
121
background-size: cover;
The CSS background-size property is used to specify the size of the background image. When given the value cover, like background-size:cover, the image covers the complete background of the container in which it is being displayed.
The proportions of the image are maintained, so if the dimensions exceed the container’s, then some parts of the image will be left out.
122
Give the code to have a background image that scales witgh its container. Explain the code.
body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
In the example above, the first CSS declaration sets the background image (# is a placeholder for an image URL in this example). The second declaration instructs the CSS compiler to not repeat the image (by default, images will repeat). The third declaration centers the image within the element.
The final declaration is what scales the background image. The image will cover the entire background of the element, all while keeping the image in proportion. If the dimensions of the image exceed the dimensions of the container then only a portion of the image will display.
123
viewport
The total viewable area for a user; this area varies depending on device. The viewport is smaller on a mobile device and larger on a desktop.
124
Give an example of a meta tag and explain its components.
the name="viewport" attribute: tells the browser to display the web page at the same width as its screen
the content attribute: defines the values for the tag, including width and initial-scale
the width=device-width key-value pair: controls the size of the viewport in which it sets the width of the viewport to equal the width of the device
the initial-scale=1 key-value pair: sets the initial zoom level
125
the name="viewport" attribute
the name="viewport" attribute: tells the browser to display the web page at the same width as its screen
126
the content attribute (meta tag)
the content attribute: defines the values for the tag, including width and initial-scale
127
the width=device-width key-value pair (meta tag)
the width=device-width key-value pair: controls the size of the viewport in which it sets the width of the viewport to equal the width of the device
128
the initial-scale=1 key-value pair (meta tag)
the initial-scale=1 key-value pair: sets the initial zoom level
129
css media query
A CSS media query can be used to adapt a website’s display and layout to different screen sizes. A media query begins with the @media keyword and is followed by one or more conditions that check screen size, orientation, resolution, and/or other properties. If these conditions are met, all CSS rules within the media query will be applied to the page. Media queries are used for responsive web design by tailoring specific stylesheets to different types of devices such as laptops, tablets, mobiles, and more.
130
CSS Media Features in Media Queries
Media queries in web development ensure that a website design is responsive. It does so through creating tailored style sheets based on the resolution of the device that it is displayed upon. The browser will detect the screen size and apply the CSS styles for that screen size based on specified media features. Media queries can set rules based on features like the screen width, the screen resolution and device orientation. These media rules can be separated by commas. When one of the media rules is true then the accompanying CSS will apply.
131
Media Type in Media Queries
When writing media queries in CSS we use the only keyword to specify the type of device. Initially, CSS incorporated a variety of media types such as screen, print and handheld. In order to ensure responsive design and to accommodate a variety of screen sizes the keyword screen is now always used for displaying content.
132
And Operator Media Queries
Through using the and operator when writing media queries in CSS, we can specify that multiple media features are required. For example we could require a certain width as well as a specific resolution for a CSS ruleset to apply. The and operator when chaining together multiple media features allows us to be more specific with the screens that we are targeting as we build responsive designs.
133
Ranges in Media Queries
Media queries can use CSS to target screen sizes within a certain range through using multiple widths and/or heights. This is an effective tool for responsive design that will address a variety of screen sizes in one CSS media query. In order to set a range for width or the height, set the minimum screen size through using min-width and/or min-height and then set the maximum through using max-width or max-height. These properties are used in combination with the and operator.
134
Dots Per Inch (DPI)
DPI, or dots per inch, is a measure of the resolution of a printed document or digital scan. The higher the dot density, the higher the resolution of the print or scan.
135
Why is it useful to target screen resolution as a media feature>
Many times we will want to supply higher quality media (images, video, etc.) only to users with screens that can support high resolution media.
Targeting screen resolution helps users avoid downloading high resolution (large file size) images that their screen may not be able to properly display.
136
min-resolution and max-resolution (media)
These media features allow us to target screen resolution. They both accept a resolution value in either dots per inch (dpi) or dots per centimeter (dpc).
137
Comma Separated List (media queries)
If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list.
138
orientation (media feature)
The orientation media feature detects if the page has more width than height. If a page is wider, it’s considered landscape, and if a page is taller, it’s considered portrait.
139
Breakpoints (media)
The points at which media queries are set are called breakpoints. Breakpoints are the screen sizes at which your web page does not appear properly.
140
What is the best practice for setting up breakpoints?
Rather than set breakpoints based on specific devices, the best practice is to resize your browser to view where the website naturally breaks based on its content. The dimensions at which the layout breaks or looks odd become your media query breakpoints. Within those breakpoints, we can adjust the CSS to make the page resize and reorganize.
By observing the dimensions at which a website naturally breaks, you can set media query breakpoints that create the best possible user experience on a project by project basis, rather than forcing every project to fit a certain screen size. Different projects have different needs, and creating a responsive design should be no different.
141
Give four code features that make for a scalable image background.
background-image: url("#")
background-repeat: no-repeat;
background-position: center;
background-size: cover;
142
language’s documentation
Every well-developed language or framework has a place where you can look up all of its features. This library of information is called a language’s documentation.
143
The Mozilla Development Network
The Mozilla Development Network is the source of documentation for HTML, CSS, and JavaScript.
