-
Notifications
You must be signed in to change notification settings - Fork 2
/
viewport-units-font-zoom.html
executable file
·67 lines (67 loc) · 4.69 KB
/
viewport-units-font-zoom.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font size with viewport units test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 100%
padding: 0;
margin: 0;
}
h1 {
font-size: 5vh;
text-align: center;
}
p {
font-size: 1rem;
line-height: 1.5rem;
}
blockquote {
font-size: 1vw;
padding: 2vh 2vw;
margin: 0 auto;
border: 2px solid #ee0000;
text-align: center;
}
code {
color: #dd0000;
background-color: #ddd;
}
header {
background: yellow;
min-height: 100vh;
display: flex;
}
header p {
font-size: 2vh;
margin: auto;
text-align: center;
}
header p:first-line {
font-size: 5vh;
}
</style>
</head>
<body>
<header>
<p>Web design. <i>Imposed.</i><br />Try zooming this text.<br />The text in the yellow header uses CSS <code>vh</code> units for <code>font-size</code>, to see how it zooms in different browsers.<br />There is more text further down the page which will zoom nicely.</p>
</header>
<h1>Viewport Width Zoom Test</h1>
<p>The heading is sized as <code>font-size: 5vh;</code>. Elsewhere the paragraphs are sized as <code>font-size: 1 rem;</code>. The idea is to see whether viewport units hinder a user who wants to resize the text.</p>
<blockquote>
This blockquote is sized as <code>font-size: 1vw;</code>
</blockquote>
<p>Lorem ipsum dolor sit amet, et dicit nonumes indoctum vis. Eripuit feugiat assentior quo ad? Explicari repudiare iracundia no cum! Quo ei forensibus persequeris philosophia, has nominavi abhorreant signiferumque ex? Audiam nostrud at pro, est modo corrumpit omittantur id! Inermis fierent menandri est id?</p>
<p> An quaestio voluptatum eos, amet officiis adipiscing te mel! Diam lorem posidonium pri ex, alia propriae te mei. Tota apeirian inimicus no per, mei ea vocibus constituto, ex laoreet perfecto per. An vitae adversarium pri! Ridens graeco euismod qui ne, usu ex simul minimum. </p>
<p> Pri erroribus gloriatur concludaturque an, ne blandit intellegat pertinacia usu! Nominavi adolescens in vel, mel malis admodum qualisque ne, in est omnium tincidunt voluptaria. Et libris tibique democritum sea, an his placerat mediocrem sententiae. Vim harum placerat in. Ea nibh velit signiferumque eam, in maiorum epicurei adolescens ius. </p>
<p> Alterum petentium eos ex, an suas zril forensibus his. Vis putant menandri eu, ex cum aperiam civibus deleniti? Id nihil accusamus adversarium vim, velit essent iriure in mei. An pro offendit torquatos suscipiantur, ad alia dolor nam. Feugait postulant ad nec, facilis maluisset philosophia in eum, vel eu harum populo dictas? An est probo impetus percipit, atqui numquam eum id, ne mea ridens insolens sensibus. </p>
<p> At habemus perpetua usu, ad quo assentior scriptorem. At est perpetua repudiare maiestatis, duo nostro nominavi id! Alienum liberavisse quo ei, putant lobortis vis cu? Ea nullam quaeque antiopam vix. Mea eu quodsi hendrerit. </p>
<p> Mel lucilius inimicus et, facilis vivendo mei te. Qui ea possit ponderum intellegam. Eu velit diceret nostrum quo, integre corrumpit duo ut? Tale dicant ignota ex sit! Elit noster adipiscing eu usu. Error exerci virtute te nam, no sapientem voluptaria moderatius eum. </p>
<p> An vel quando luptatum, pro te consul saperet, mea sint labore nemore te. Sea ex debet suscipit, soluta semper verterem eum et? No has deleniti iudicabit intellegebat. Dolores officiis sententiae vel id, duo ei ullum disputando? Quando dolorem legendos ad mel, illum ancillae platonem vix et, ocurreret reformidans accommodare eu sea. Ne enim appellantur sea. Graeci appellantur duo cu? </p>
<p> Ei oblique corpora pro. Qui odio sale ut, fastidii reformidans usu ex. Case patrioque no quo, dicunt democritum sit in. Sed ludus percipitur ut, iudicabit mediocritatem in sed, per accusam iudicabit et? Per no magna timeam periculis! Cu posse congue repudiare pro, sed eu solum detracto, scripta rationibus vim ad! </p>
<p> Ferri justo illum at eum, ei illum cetero utamur usu. Ut animal fuisset eos! Id nam saepe primis theophrastus, ne dictas deserunt evertitur est. Sed diceret periculis at, cum virtute urbanitas ei. </p>
<p> Mel sumo ferri abhorreant at, cetero pertinax accommodare ne mei, odio amet an pri. Ex est nostrum scriptorem voluptatibus, mei falli sanctus hendrerit no. In aperiri minimum electram eam, ius aperiri mediocrem in, agam munere in eum. At eam quis sumo, sensibus rationibus suscipiantur eam cu. </p>
</body>
</html>