Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/index.html

Created August 3, 2021 14:08
Show Gist options
  • Save subzey/54ce78be21f18d7419b51f7ba08f3cc7 to your computer and use it in GitHub Desktop.
Save subzey/54ce78be21f18d7419b51f7ba08f3cc7 to your computer and use it in GitHub Desktop.
Download ZIP
Media query test
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Media query test</title>
<style>
html {
font-size: 5vw;
}
.v-none, .v-hover, .v-coarse, .v-fine {
background: red;
}
@media (hover: none) { .mq-hover .v-none { background: green} }
@media (hover: hover) { .mq-hover .v-hover { background: green} }
@media (any-hover: none) { .mq-any-hover .v-none { background: green} }
@media (any-hover: hover) { .mq-any-hover .v-hover { background: green} }
@media (pointer: none) { .mq-pointer .v-none { background: green} }
@media (pointer: coarse) { .mq-pointer .v-coarse { background: green} }
@media (pointer: fine) { .mq-pointer .v-fine { background: green} }
@media (any-pointer: none) { .mq-any-pointer .v-none { background: green} }
@media (any-pointer: coarse) { .mq-any-pointer .v-coarse { background: green} }
@media (any-pointer: fine) { .mq-any-pointer .v-fine { background: green} }
</style>
</head>
<body>
<table>
<tr class="mq-hover">
<th>hover:</th>
<td class="v-none">none</td>
<td class="v-hover">hover</td>
</tr>
<tr class="mq-any-hover">
<th>any-hover:</th>
<td class="v-none">none</td>
<td class="v-hover">hover</td>
</tr>
</table>
<table>
<tr class="mq-pointer">
<th>pointer:</th>
<td class="v-none">none</td>
<td class="v-coarse">coarse</td>
<td class="v-fine">fine</td>
</tr>
<tr class="mq-any-pointer">
<th>any-pointer:</th>
<td class="v-none">none</td>
<td class="v-coarse">coarse</td>
<td class="v-fine">fine</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment