MEDIA QUERIES TEST

several media queries test based on http://fiddle.jshell.net/leolanese/fvc9e/

by lovromar

HTML

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
</head>

<body>
    <section>
        <h2>sizes</h2>
        <article class="border c176">yellow < 176px</article>
        <article class="border c177-240">darkred [177-240]</article>
        <article class="border c241-320">green [241-320]</article>
        <article class="border c321-480">gray [321-480]</article>
        <article class="border c600">pink < 600px</article>
        <article class="border c600-800">blue [ 600px - 800px ]</article>
        <article class="border c800-900">orange [ 800px - 900px ]</article>
        <article class="border c900">red > 900px</article>
        <article class="border c1024">> 1024</article>

        <h2>capabilities</h2>
        <article class="border handheld">handheld</article>
        <article class="border screen">screen</article>
        <article class="border tv">tv</article>
        <article class="border 3d-glasses">3d-glasses</article>
        <article class="border max-device-device">max-device-width:480px (IE: iPhone)</article>
        <article class="border landscape">landspace</article>
        <article class="border monochrome">monochrome</article>
        <article class="border color">color</article>
        <article class="border hd">HD, High PPI Devices</article>
    </section>
    <div id="sizer">w:???px < h:???px</div>
    <p class="box">
     <span class="176">< = 176px - SMALL</span>
     <span class="c177-240">[177-240]px</span>
     <span class="c241-320">[241-320]px</span>
     <span class="c321-480">[321-480]px</span>
     <span class="c600">< = 600px</span>
     <span class="c600-800">[600-800]px</span>
     <span class="c800-900">[800-900]px</span>
     <span class="c900">>= 900px</span>

     <span class="handheld">handheld</span>
     <span class="screen">screen</span>
     <span class="tv">tv</span>
     <span class="3d-glasses">3d-glasses</span>
     <span...

CSS

.border {
    border: 1px solid black;
    padding: 2px;
    margin: 2px;

 }

 .box span {
    color: black;
    display: none;
    width:5em;
    height:5em;
 }

 .id {
     color:red;
     width:123px;
     border:1px solid red;
     height:123px
 }
 h2 {
    font-size: 1.5em;
 }


/* max-width */
@media (max-width: 176px) {
    .c176 {
        background: yellow;
    }
    span.c176 {
        display: inline-block;
    }
}

/* min-width & max-width */
@media (min-width: 177px) and (max-width: 240px) {
    .c177-240 {
        background: darkred;
    }
    span.c177-240 {
        display: inline-block;
    }
}


/* min-width & max-width */
@media  (min-width: 241px) and (max-width: 320px) {
    .c241-320 {
        background: green;
    }
    span.c241-320 {
        display: inline-block;
    }
}

/* min-width & max-width */
@media (min-width: 321px) and (max-width: 480px) {
    .c321-480 {
        background: gray;
    }
    span.c321-480 {
        display: inline-block;
    }
}

/* max-width */
@media  (max-width: 600px) {
    .c600 {
        background: #F9C;
    }
    span.c600 {
        display: inline-block;
    }
}

/* min-width & max-width */
@media (min-width: 600px) and (max-width: 800px) {
    .c600-800 {
        background: #9CF;
    }
    span.c600-800 {
        display: inline-block;
    }
}

/* min-width & max-width */
@media  (min-width: 800px) and (max-width: 900px) {
    .c800-900 {
        background: orange;
    }
    span.c800-900 {
        display: inline-block;
    }
}

/* min-width */
@media (min-width: 900px) {
    .c900 {
        background: red;
    }
    span.c900 {
        display: inline-block;
    }
}

/* min-width */
@media (min-width: 1024px) {
    .c1024 {
        background: red;
    }
    span.c1024 {
        display: inline-block;
    }
}



/* handheld */
@media (handheld) {
    .handheld {
        background: pink;
    }
    span.handheld {
        display: inline-block;
    }
}
/* screen */
@media (screen) {
    .screen...

JavaScript

var sizer = function(){
       var w=0, h=0;
       if (document.body && document.body.offsetWidth) {
          w = document.body.offsetWidth;
          h = document.body.offsetHeight;
       }
       if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
          w = document.documentElement.offsetWidth;
          h = document.documentElement.offsetHeight;
       }
       if (window.innerWidth && window.innerHeight) {
          w = window.innerWidth;
          h = window.innerHeight;
       }

       if (w >= h) {
            size = 'w:<u>'+w+'px</u> >= h:'+h+'px';
       } else {
            size = 'w:'+w+'px < h:<u>'+h+'px</u>';
       }

       document.getElementById("sizer").innerHTML = size;
}

window.onresize = sizer;