CSS Responsive

Question 1

Widths of your content areas should use _____ units such as _______. This allows the widths to automatically adjust based on the width.

Answer 1

Widths of your content areas should use relative units such as percentages. This allows the widths to automatically adjust based on the width.

Question 2

When the layout becomes less effective, even when fluid grids are used, it is time to consider _____ ______.

Answer 2

When the layout becomes less effective, even when fluid grids are used, it is time to consider Media Queries.

Question 3

Media Queries allow Web designers to apply different CSS based on a device’s properties such as ______, _____, _____, and _____ _____.

Answer 3

Media Queries allow Web designers to apply different CSS based on a device’s properties such as width, height, orientation, and pixel ratio.

Question 4

We can include Media Queries in 3 ways:

Answer 4

1) Call an external stylesheet using the link element
2) Call an external stylesheet using the @import directive
3) Use embedded style elements

Question 5

Call an external stylesheet using the link element (SYNTAX)

Answer 5

Syntax:

Question 6

Call an external stylesheet using the @import directive (SYNTAX)

Answer 6

Syntax: @import url(‘file’) logic media and (expression);

@import url(“main.css”);
@import url(“small.css”) screen and (max-width: 480px);
@import url(“med.css”) screen and (max-width: 760px);

Question 7

Use embedded style elements

Answer 7

Syntax: @media logic media and (expression) {rules}

Within the same CSS file:
h1 {
font-size: 36px;
}

@media screen and (max-width: 480px){ 
	h1 { 
	   font-size: 18px;
	   } 
}

Question 8

Common breakpoints for media queries:

Answer 8

Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px

Question 9

While there are recommended breakpoints based on experience, common device attributes, and framework implementations, developers should add media queries when the ________ demands it.

Answer 9

While there are recommended breakpoints based on experience, common device attributes, and framework implementations, developers should add media queries when the content demands it.

Question 10

Your decisions should be _______-driven.

Answer 10

Your decisions should be content-driven.

Question 11

Name some common media types:

Answer 11

all-All devices
3d-glasses-3D Scenarios
aural-Screen readers
braille-Braille Tactile devices
embossed-Paged Braille devices
handheld-Device with a small screen / handheld devices
projection-Projection presentations screen
screen-Computer screen (or mobile screen) speech synthesizers
tty-Teletype or similar terminal
tv-Low-resolution display / Television devices
print-Printed output and print preview

Question 12

(max-_____: 480px) used for browser viewport sizes that are __ ______ than 480px

Answer 12

(max-width: 480px) used for browser viewport sizes that are no wider than 480px

Question 13

(min-____: 640px) used for browser viewport sizes that are __ _____ 640px

Answer 13

(min-width: 640px) used for browser viewport sizes that are at least 640px

Question 14

(________: landscape) where value can be landscape or portrait

Answer 14

(orientation: landscape) where value can be landscape or portrait

Question 15

(____-____:1.5) Target devices based on their pixel density

Answer 15

(pixel-ratio:1.5) Target devices based on their pixel density