-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
80 lines (75 loc) · 3.01 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="css.vunits.min.js"></script>
<script type="text/javascript">
CSSVUnits.add({
selector : 'body',
style : {
"margin" : "5vh 5vw",
"padding" : "2vh 5vw",
"border" : "0.5vw solid #000"
}
});
CSSVUnits.add({
selector : 'h1',
style : {
"margin" : "5vh auto 0",
"max-width" : "960px",
"font-size" : "5vmax",
"text-transform" : "uppercase",
"line-height" : "6vmax",
}
});
CSSVUnits.add({
media : 'screen and (min-width: 800px)',
selector : 'h1',
style : {
"font-weight" : "normal"
}
});
CSSVUnits.add({
selector : 'h2',
style : {
"margin" : "1vh auto 0",
"max-width" : "960px",
"font-size" : "2vmax",
"text-transform" : "uppercase",
"line-height" : "3vmax",
"letter-spacing" : "5vw",
}
});
CSSVUnits.add({
media : 'screen and (min-width: 450px)',
selector : 'p',
style : {
"margin" : "5vh auto",
"min-width" : "200px",
"max-width" : "960px",
"font-size" : "3vmax",
"line-height" : "4.5vmax",
}
});
CSSVUnits.add({
media : 'screen and (max-width: 450px)',
selector : 'p',
style : {
"margin" : "2vh 5vw",
"font-size" : "4vmax",
"line-height" : "6vmax",
}
});
</script>
</head>
<body>
<h1>Relative viewport units</h1>
<h2>responsive</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat enim quis enim tincidunt sit amet varius quam consequat.
Phasellus tincidunt nisi nec tellus pulvinar aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque ultrices iaculis justo sed interdum. Aliquam erat volutpat. Sed at mauris fringilla orci feugiat fermentum.
Vivamus ornare convallis ante. Curabitur malesuada mi ac massa eleifend faucibus.
</p>
</body>
</html>