| body, html { |
| height: 100%; |
| background-color: white; |
| color: black; |
| min-height: 300px; |
| width: 100%; |
| min-width: 300px; |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| font-size: 2.0em; |
| line-height: 1.4em; |
| font-family: Roboto; |
| } |
| |
| #span300 { |
| display: block; |
| width:50px; |
| height:100px; |
| background-color: black; |
| } |
| |
| #span400 { |
| display: block; |
| width:100px; |
| height:50px; |
| background-color: yellow; |
| } |
| |
| |
| /* Responsive design. Put this at the bottom of this file. */ |
| @media screen and (min-height: 300px) { |
| body, html { |
| background-color: red; |
| font-size: 3.0em; |
| } |
| #span300 { |
| display: block; |
| } |
| #span400 { |
| display: none; |
| } |
| } |
| |
| @media screen and (min-height: 400px) { |
| body, html { |
| background-color: blue; |
| } |
| #span400 { |
| display: block; |
| } |
| #span300 { |
| display: none; |
| } |
| } |