html_css_templates/simple.html at b55be24f3ff6e75dc0589fd782cd346df2b3dedf · macloo/html_css_templates · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Simple HTML Tutorials">
        <meta name="keywords" content="HTML, CSS, Responsive">
	<title> Simple page for all device sizes </title>
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/simple.css">
</head>

<body>

	<h1>A simple page for all device sizes.</h1>

	<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">Max-Width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.</p>

	<p>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a> is required here, because the CSS adapts to any screen size.</p>

	<p>Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.</p>

	<img src="images/screenshot.png" alt="Screenshot">


	<p class="centered"><a href="index.html">index</a> | <a href="https://github.com/macloo/html_css_templates">GitHub</a><br>
	* Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>


</body>
</html>