-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
110 lines (82 loc) · 3.56 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>MM</title>
<style>
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
h1{
padding: 0;
margin: 0;
}
*/
/* test if have media queries */
@media all and (min-width:1px) {
body{background:pink;}
}
/* Small screens */
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) {
/*html{ font-size: 32px; } */
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
/* Medium screens */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-device-width: 40.063em) {
/* body{min-width: 998px;} */
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
html{
font-family: arial, sans-serif; /* FF sans-serif too heavy */
}
body{
background: pink;
}
.container{
height: 6em;
background: red;
margin: 2rem 6rem 0 6rem;
}
.box{
background: yellow;
padding: 1.75rem;
}
p{
font-size: 2.3rem;
background: lime;
padding: 1rem;
}
#info{
min-width: 2rem;
min-height: 1rem;
background: lime;
position: absolute;
top:0;
left:0;
}
</style>
<script type="module">
import mimetic from './dist/mimetic.min.js'
mimetic({
mobileWidth: 0,
hideWarning: true
})
</script>
</head>
<body>
<div id="info"></div>
<div>
<div class="container">
Margin
<div class="box">
<p>Hello World!</p>
<input type="text" >
<input type="text" >
<input type="text" >
</div>
</div>
</div>
<script></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fastdom/1.0.5/fastdom-strict.min.js"></script> -->
</body>
</html>