TopLabs. Introduction to responsive design

1.

TopLabs
Introduction to responsive design

2.

Viewport
<meta name="viewport"
content="width=devicewidth, initial-scale=1">
http://www.w3schools.com/css/css_rwd_viewport.asp

3.

CSS3 media queries
@media screen and (min-width: 480px) {
body {
background-color: red;
}
}
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

4.

Including CSS
The 3 ways

5.

Including CSS

6.

Including CSS
The 3 ways
<style></style> Tag

7.

Including CSS
The 3 ways
<style></style> Tag
<link> Tag

8.

Including CSS
The 3 ways
<style></style>
<link>
Inline CSS “style attribute”

9.

Bootstrap Grid

10.

Bootstrap Grid