demo of @media query

[email protected]

demo of @media query

一个有趣的例子： use css media query

A Pen by FrankFan on CodePen.

License.

index.html

<div class="cat"></div>

style.css

.cat{
  width: 900px;
  height: 500px;
}


@media screen and (min-width: 850px) {
  .cat{ background:url(http://images.cnitblog.com/blog2015/405426/201503/030950092231183.png) no-repeat}
}


@media (min-width: 500px) and (max-width: 850px) {
  .cat{ background:url(http://images.cnitblog.com/blog2015/405426/201503/030950358798105.png) no-repeat}
}

@media (max-width: 500px) {
  .cat{ background:url(http://images.cnitblog.com/blog2015/405426/201503/030951245513470.png) no-repeat}
}