/
test.html
20 lines (16 loc) · 1008 Bytes
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Respond JS Test Page</title>
<link href="test.css" rel="stylesheet"/>
<link href="test2.css" media="screen and (min-width: 37.5em)" rel="stylesheet"/> <!-- 37.5em = 600px @ 16px -->
<script src="../dest/respond.src.js"></script>
</head>
<body>
<p>This is just a visual test file, and an ugly one at that! For unit tests, visit the <a href="unit/"> Respond.js unit test suite</a></p>
<p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
<p>For a realistic use case for media queries: read up on <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a></p>
<p id="attribute-test">Media-attributes are working too! This should be visible above 37.5em.</p>
</body>
</html>