Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 18, 2015 23:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/c887e1679548f4f410c8 to your computer and use it in GitHub Desktop.
Save anonymous/c887e1679548f4f410c8 to your computer and use it in GitHub Desktop.
Download ZIP
Media Query Exercise // source http://jsbin.com/tuqenu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Media Query Exercise</title>
<style id="jsbin-css">
@media (min-width: 25rem) {
.media-container {
color: red;
}
.blue, .green {
display: none;
}
}
@media (min-width: 28.125rem) {
.media-container {
color: blue;
}
.green, .red {
display: none;
}
.blue {
display: inline;
}
}
@media (min-width: 31.250em) {
.media-container {
color: green;
}
.blue, .red {
display: none;
}
.green {
display: inline;
}
}
</style>
</head>
<body>
<div class="media-container">My color is
<span class="red">red</span>
<span class="blue">blue</span>
<span class="green">green</span>
</div>
<script id="jsbin-source-css" type="text/css">@media (min-width: 25rem) {
.media-container {
color: red;
}
.blue, .green {
display: none;
}
}
@media (min-width: 28.125rem) {
.media-container {
color: blue;
}
.green, .red {
display: none;
}
.blue {
display: inline;
}
}
@media (min-width: 31.250em) {
.media-container {
color: green;
}
.blue, .red {
display: none;
}
.green {
display: inline;
}
}</script>
</body>
</html>
Raw
jsbin.tuqenu.css
@media (min-width: 25rem) {
.media-container {
color: red;
}
.blue, .green {
display: none;
}
}
@media (min-width: 28.125rem) {
.media-container {
color: blue;
}
.green, .red {
display: none;
}
.blue {
display: inline;
}
}
@media (min-width: 31.250em) {
.media-container {
color: green;
}
.blue, .red {
display: none;
}
.green {
display: inline;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment