Skip to content

Instantly share code, notes, and snippets.

@b1

b1/media_queries.html

Created September 24, 2013 09:55
Show Gist options
  • Save b1/6682653 to your computer and use it in GitHub Desktop.
Save b1/6682653 to your computer and use it in GitHub Desktop.
Download ZIP
Just test MQ
Raw
media_queries.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
.box1 {
background: #7cba30;
height: 100px;
width: 200px;
display: inline-block;
}
.box2 {
background: #7C7C7C;
height: 100px;
width: 500px;
display: inline-block;
}
@media all and (max-width: 701px){
.box1 {
height: 100px;
width: 500px;
display: block;
}
.box2 {
height: 100px;
width: 500px;
display: block;
}
}
</style>
</head>
<body>
<a href="http://www.w3.org/TR/css3-mediaqueries/">http://www.w3.org/TR/css3-mediaqueries/</a>
<br>
<a href="http://css-tricks.com/css-media-queries/">http://css-tricks.com/css-media-queries/</a>
<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries</a>
<br>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment