JSFiddle - React, Tailwind, and code Playground

by abarykin

HTML

<div id="content">Привет, я контент!<br> <img src="http://www.agima.ru/userfiles/statistiks(1).jpg"></div>
<div id="media"></div>

CSS

*{
transition:all .2s ease-in; 
-o-transition:all .2s ease-in; 
-moz-transition:all .2s ease-in; 
-webkit-transition:all .2s ease-in;
}
/* шильдик с информацией о текущем @media правиле */
#media{
background-color:RGBA(0,0,0,0.3);
color:#FF0;
width:200px;
height:20px;
padding:5px;
position:fixed;
top:0;
left:0;
z-index:9999;
}
/* правила для всех устройств */
#content{
height:100px;
padding:10px;
border:1px solid #000;
}
#content img {
   max-width: 100%;
   height: auto;
   width: auto\9; /* для старичка ie8 */
}
/* правила для устройств от 480 точек по ширине*/
@media only screen and (min-width: 480px){
  #media:before {content: 'min-width: 480px';}
  #content{
  height:400px;
  padding:20px;
  border:1px solid red;
  }
}
/* правила для устройств от 800 точек по ширине*/
@media only screen and (min-width: 800px){
  #media:before {content: 'min-width: 800px';}
  #content{
  height:800px;
  padding:30px;
  border:1px solid green;
  }
}