/
index.html
127 lines (93 loc) · 3.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15 Words of Lorem</title>
<style>
body {
font-family:georgia;
line-height:1.6;
margin:1em auto;
padding:0 1em;
font-size:100%;
min-width:15em;
max-width:40em;
}
pre {
background:#eee;
padding:0.25em;
}
.lorem {
background:#ffc;
}
.filler {
color:#999;
}
img {
max-width:100%;
}
@media (max-width: 25em) {
body {
font-size:125%;
}
}
@media (min-width: 60em) {
body {
font-size:125%;
min-width:15em;
max-width:45em;
}
}
</style>
</head>
<body>
<header role="banner">
<h1>15 Words of Lorem</h1>
</header>
<div role="main">
<p>The ideal line length is about 15 words, apparently.</p>
<p>At 16px – which is about default for web browsers – that’s about 40em</p>
<p>If we define the <code>max-width</code> as <code>40em</code> and the <code>min-width</code> as say 15em, the line lengths are 15 and 8 words respecitvely.</p>
<pre>
body {
font-size:100%;
min-width:15em;
max-width:40em;
}
</pre>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est at mauris interdum pulvinar.</p>
<h2>Smaller Windows</h2>
<p>On smaller screens, we can target a <code>max-width</code> of 40em and bump the text size up a bit. I’m guessing that shorter line lengths are preferable when reading on a small screen.</p>
<pre>
@media (max-width: 40em) {
body {
font-size:125%;
}
}
</pre>
<h2>Bigger Windows</h2>
<p>People with bigger screens are probably going to be sat a little further away. Lets increase the text size a bit. By doing so, we need to increase the width of the page so that the line length is around 15 words again.</p>
<pre>
@media (min-width: 60em) {
body {
font-size:125%;
min-width:15em;
max-width:45em;
}
}
</pre>
<h2>Images</h2>
<p>Image scaling is easy: <code>max-width:100%;</code>.</p>
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="filler">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://placehold.it/600x300" />
</div>
<hr />
<footer role="contentinfo">
<p>By <a href="http://twitter.com/_gareth" title="By @_gareth">@_gareth</a> – probably not the first to think of this.</p>
</footer>
</body>
</html>