@media

Property Variable Name

@media

Available Values for @media

all|screen|print|speech

Example using @media all

Here is an example using @media:all;

Code

<style>
@media only all and (max-width: 800px) {
.demo-box-1 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
}
}
</style>
<h2>Example using @media all</h2>
<p>Here is an example using <code>@media:all;</code></p>
<div class='demo-box-1'>
</div>

Example using @media screen

Here is an example using @media:screen;

Code

<style>
@media only screen and (max-width: 800px) {
.demo-box-2 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
}
}
</style>
<h2>Example using @media screen</h2>
<p>Here is an example using <code>@media:screen;</code></p>
<div class='demo-box-2'>
</div>

Example using @media print

Here is an example using @media:print;

Code

<style>
@media only print and (max-width: 800px) {
.demo-box-3 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
}
}
</style>
<h2>Example using @media print</h2>
<p>Here is an example using <code>@media:print;</code></p>
<div class='demo-box-3'>
</div>

Example using @media speech

Here is an example using @media:speech;

Code

<style>
@media only speech and (max-width: 800px) {
.demo-box-4 {
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background:url(https://css.kruxor.com/images/pexels-johannes-rapprich-4996652-1200.jpg);
}
}
</style>
<h2>Example using @media speech</h2>
<p>Here is an example using <code>@media:speech;</code></p>
<div class='demo-box-4'>
</div>