/
fit.css
44 lines (38 loc) · 1.32 KB
/
fit.css
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
/*!
* fit.css base responsive styles
* @version 2014.11.22
* @link http://github.com/ryanve/fit
* @license MIT
*/
/* Allow text to wrap */
body { word-wrap:break-word }
/* Keep =media flush to its container (h5bp.com/i/440) */
img, audio, video, canvas, iframe, object, embed { vertical-align:middle }
/*
* =media and =form responsiveness
* Avoid height:auto on iframe|object|embed due to clipping.
* Void inline styles via !important if needed.
*/
[style*="width:"],
iframe, object, embed, input, textarea, progress, meter, datalist, output { max-width:100% }
img, audio, video, canvas { max-width:100%; height:auto }
/*
* Prevent IE8 height distortion.
* http://stackoverflow.com/a/8831173/770127
* http://browserhacks.com/#ie
*/
@media \0screen {
img { width:auto }
}
/* Prevent uncontained dimensions from inducing scrollbar. */
.xconfine { overflow-x:hidden }
.yconfine { overflow-y:hidden }
/*
* Maintain YouTube/Vimeo iframe|object|embed aspect ratio
* http://github.com/ryanve/fit/issues/1
* <div data-fit-ratio="16:9"><iframe src width="640" height="360"></iframe></div>
*/
[data-fit-ratio] { position:relative }
[data-fit-ratio="4:3"] { padding:75% 0 0 0 }
[data-fit-ratio="16:9"] { padding:56.25% 0 0 0 }
[data-fit-ratio] * { position:absolute; left:0; top:0; height:100%; margin:0; padding:0; border:0 }