1

●
●
●
●
●

2
3
●

●
●
○
○ multiple fixed width layouts
○

4
●
○
○
○

5
●

○
○
●
●

6
7
●

●
○
○
img, video, canvas {
max-width: 100%;
height: auto;
}

●
8
●

●
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

@media (min-width: 700px) { … }

@media (min-width: 700px) and (orientation: landscape) { … }
@media tv and (min-width: 700px) and (orientation: landscape) {…}

9
media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
| <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
projection | screen | tty | tv | embossed | speech
media_feature: width | min-width | max-width
| height | min-height | max-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

10
●
○
○

11
12
●
○

<meta name="viewport" content="width=device-width, initial-scale=1" />

13
●
○
○
○

●
○
○

○
14
●
○
○
○

15
●
○

○
●

16
17
.product-img {
width: 100%;
}

@media screen and (min-width: 700px) {

.product-img {
width: 50%;
float: left;
}
}

18
19
●
●
○
○
○

20
21
●
●
●

22
●
●

23
● Ethan Marcotte’s article in A List Apart: https://alistapart.com/article/responsive-web-design

● https://developers.google.com/web/fundamentals/design-and-ui/responsive/

● https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns

● https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

● http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

● https://responsivedesign.is/guidelines/

● http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

● https://css-tricks.com/rundown-of-handling-flexible-media/

● Great book: https://resilientwebdesign.com/

24