CSS: media queries (visible output) #sublime

Media Queries

// MEDIA QUERIES
// ------------------

body:before { 
    background: #ffc;   
/*  width: 96%; */
    display:block;
    position: absolute;
    z-index:1000;
/*  padding: 1em 2%;   */
    opacity:0.7;
}
    
/* 320px / 18 = 18em */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    body:before { 
        width: 320px;
        height: 415px; /*480px*/
        content: "mobile portrait: 320px/18em to 479px/26em";
    }
} /* 480px / 18 = 27em */
@media only screen and (min-width: 320px) and (max-width: 479px) and (-webkit-min-device-pixel-ratio: 1.5) {
    //only screen and (-o-min-device-pixel-ratio: 3/2),
    //only screen and (min-device-pixel-ratio: 1.5)
    body:before { 
        content: "RETINA mobile portrait: 640px/18em to 958px/26em HiDPI";
    }
} @media only screen and (min-width: 480px) and (max-width: 767px) {
    body:before { 
        width: 480px;
        height: 270px; /*360px*/
        content: "mobile wide: 480px/27em to 767px/42em";
    }
} /* 768px / 18 = 43em */
@media only screen and (min-width: 480px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body:before { 
        content: "RETINA mobile wide: 960/18em to 1916px/26em HiDPI";
    }
} @media only screen and (min-width: 768px) and (max-width: 979px) {
    body:before { 
        width: 768px;
        height: 1024px; /*1024px*/
        content: "tablet portrait: 768px/43em to 979px/54em";
    }
} /* 980px / 18 = 54em */
@media only screen and (min-width: 768px) and (max-width: 979px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body:before { 
        content: "RETINA tablet portrait: 1536px/43em to 1958px/54em HiDPI";
    }
} @media only screen and (min-width: 980px) and (max-width: 1439px) {
    body:before {  
        width: 980px;
        height: 768px; /*768px*/
        content: "tablet wide: 980px/54em to 1439px/79em";
    }
} /* 1440px / 18 = 80em */
@media only screen and (min-width: 980px) and (max-width: 1439px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body:before {  
        content: "RETINA tablet wide: 1960px/54em to 2878px/79em HiDPI";
    }
} @media only screen and (min-width: 1440px) and (max-width: 1919px) {
    body:before { 
        width: 1440px;  
        height: 765px; /*900px*/
        content: "desktop: 1440px/80em to 1919px/106em";
    }
} /* 1920px / 18 = 107em */
@media only screen and (min-width: 1440px) and (max-width: 1919px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body:before {  
        content: "RETINA desktop: 2880px/80em to 3838px/106em HiDPI";
    }
} @media only screen and (min-width: 1920px) {
    body:before {   
        width: 1920px;
        height: 1065px; /*1080px*/
        content: "TVs: 1920px/107em";
    }
} @media only screen and (min-width: 1920px) and (-webkit-min-device-pixel-ratio: 1.5) {
    body:before {  
        content: "RETINA TVs: 3940px/107em HiDPI";
    }
}