10BC0 RWD examples · Milypm/css-examples@c871fe7 · GitHub
Skip to content

Commit c871fe7

Browse files
rachelandrewrachelandrew
committed
RWD examples
1 parent b773fd3 commit c871fe7

File tree

7 files changed

+362
-0
lines changed

7 files changed

+362
-0
lines changed

‎learn/rwd/fixed-width.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A fixed width layout</title>
6+
<style>
7+
body {
8+
font: 1.2em Helvetica, Arial, sans-serif;
9+
margin: 20px;
10+
padding: 0;
11+
background-color: #eee;
12+
}
13+
.wrapper {
14+
width: 960px;
15+
margin: 2em auto;
16+
}
17+
18+
.col1 {
19+
width: 300px;
20+
float: left;
21+
background-color: #fff;
22+
}
23+
24+
.col2 {
25+
width: 620px;
26+
float: right;
27+
background-color: #fff;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<div class="wrapper">
35+
<div class="col1">
36+
<p>This layout is fixed width. See what happens if you make the browser window narrow.</p>
37+
</div>
38+
<div class="col2">
39+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
40+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
41+
</div>
42+
43+
</div>
44+
</body>
45+
46+
</html>

‎learn/rwd/flex-based-rwd.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A simple flexbox-based responsive design</title>
6+
<style>
7+
body {
8+
font: 1.2em Helvetica, Arial, sans-serif;
9+
margin: 20px;
10+
padding: 0;
11+
background-color: #eee;
12+
}
13+
.wrapper {
14+
max-width: 960px;
15+
margin: 2em auto;
16+
}
17+
18+
.col1,
19+
.col2 {
20+
background-color: #fff;
21+
}
22+
23+
@media screen and (min-width: 600px) {
24+
.wrapper {
25+
display: flex;
26+
}
27+
28+
.col1 {
29+
flex: 1;
30+
margin-right: 5%;
31+
}
32+
33+
.col2 {
34+
flex: 2;
35+
}
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
42+
<div class="wrapper">
43+
<div class="col1">
44+
<p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
45+
</div>
46+
<div class="col2">
47+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
48+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
49+
</div>
50+
51+
</div>
52+
</body>
53+
54+
</html>

‎learn/rwd/float-based-rwd.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A simple float-based responsive design</title>
6+
<style>
7+
body {
8+
font: 1.2em Helvetica, Arial, sans-serif;
9+
margin: 20px;
10+
padding: 0;
11+
background-color: #eee;
12+
}
13+
.wrapper {
14+
max-width: 960px;
15+
margin: 2em auto;
16+
}
17+
18+
.col1,
19+
.col2 {
20+
background-color: #fff;
21+
}
22+
23+
@media screen and (min-width: 600px) {
24+
.col1 {
25+
width: 31.24999999%;
26+
float: left;
27+
}
28+
29+
.col2 {
30+
width: 64.58333331%;
31+
float: right;
32+
}
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
39+
<div class="wrapper">
40+
<div class="col1">
41+
<p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
42+
</div>
43+
<div class="col2">
44+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
45+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
46+
</div>
47+
48+
</div>
49+
</body>
50+
51+
</html>

‎learn/rwd/grid-based-rwd.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A simple grid-based responsive design</title>
6+
<style>
7+
body {
8+
font: 1.2em Helvetica, Arial, sans-serif;
9+
margin: 20px;
10+
padding: 0;
11+
background-color: #eee;
12+
}
13+
.wrapper {
14+
max-width: 960px;
15+
margin: 2em auto;
16+
}
17+
18+
.col1,
19+
.col2 {
20+
background-color: #fff;
21+
}
22+
23+
@media screen and (min-width: 600px) {
24+
.wrapper {
25+
display: grid;
26+
grid-template-columns: 1fr 2fr;
27+
column-gap: 5%;
28+
}
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
35+
<div class="wrapper">
36+
<div class="col1">
37+
<p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
38+
</div>
39+
<div class="col2">
40+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
41+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
42+
</div>
43+
44+
</div>
45+
</body>
46+
47+
</html>

‎learn/rwd/liquid-width.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A liquid layout</title>
6+
<style>
7+
body {
8+
font: 1.2em Helvetica, Arial, sans-serif;
9+
margin: 20px;
10+
padding: 0;
11+
background-color: #eee;
12+
}
13+
.wrapper {
14+
width: 90%;
15+
margin: 2em auto;
16+
}
17+
18+
.col1 {
19+
width: 25%;
20+
float: left;
21+
background-color: #fff;
22+
}
23+
24+
.col2 {
25+
width: 70%;
26+
float: right;
27+
background-color: #fff;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<div class="wrapper">
35+
<div class="col1">
36+
<p>This layout is liquid. See what happens if you make the browser window wider or narrow.</p>
37+
</div>
38+
<div class="col2">
39+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
40+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
41+
</div>
42+
43+
</div>
44+
</body>
45+
46+
</html>

‎learn/rwd/type-rwd.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Demonstration of responsive typography</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
body {
12+
font: 1.2em Helvetica, Arial, sans-serif;
13+
margin: 20px;
14+
padding: 0;
15+
background-color: #eee;
16+
}
17+
.wrapper {
18+
max-width: 960px;
19+
margin: 2em auto;
20+
}
21+
22+
h1 {
23+
font-size: 2rem;
24+
margin: 0;
25+
}
26+
27+
.col1,
28+
.col2 {
29+
background-color: #fff;
30+
}
31+
32+
@media screen and (min-width: 600px) {
33+
.wrapper {
34+
display: grid;
35+
grid-template-columns: 1fr 2fr;
36+
column-gap: 5%;
37+
}
38+
39+
h1 {
40+
font-size: 4rem;
41+
}
42+
}
43+
</style>
44+
</head>
45+
46+
<body>
47+
48+
<div class="wrapper">
49+
<div class="col1">
50+
<h1>Watch my size!</h1>
51+
<p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
52+
</div>
53+
<div class="col2">
54+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
55+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
56+
</div>
57+
58+
</div>
59+
</body>
60+
61+
</html>

‎learn/rwd/type-vw.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Demonstration of responsive typography with vw</title>
6+
<style>
7+
html {
8+
font-size: 1em;
9+
}
10+
11+
body {
12+
font: 1.2em Helvetica, Arial, sans-serif;
13+
margin: 20px;
14+
padding: 0;
15+
background-color: #eee;
16+
}
17+
.wrapper {
18+
max-width: 960px;
19+
margin: 2em auto;
20+
}
21+
22+
h1 {
23+
font-size: calc(1.5rem + 3vw);
24+
margin: 0;
25+
}
26+
27+
.col1,
28+
.col2 {
29+
background-color: #fff;
30+
}
31+
32+
@media screen and (min-width: 600px) {
33+
.wrapper {
34+
display: grid;
35+
grid-template-columns: 1fr 2fr;
36+
column-gap: 5%;
37+
}
38+
}
39+
</style>
40+
</head>
41+
42+
<body>
43+
44+
<div class="wrapper">
45+
<div class="col1">
46+
<h1>Watch my size!</h1>
47+
<p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
48+
</div>
49+
<div class="col2">
50+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
51+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
52+
</div>
53+
54+
</div>
55+
</body>
56+
57+
</html>

0 commit comments

Comments
 (0)