div {
    padding: 10px;
    border: 1px solid #000;
    background: #ccc;
    box-sizing: border-box;
    background: pink;
} /* default for small screens < 500px */
@media screen and (min-width: 500px) { /*for all screens > 500px*/
    div {
        width: 25%; 
        float: left;
        background: green;
    }
    h1 {
        font-size: 4vw;
        color: blue;
	}
} /*Works the OPPOSITE of the usual use. SO by default is for small screens but when you have a resolution > 500 then the roules apply*/

/*IPHONE 6+ FIX*/
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) {
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
	h1 {
        color: red;
	}
}


/*
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
*/

/*common*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* RESPONSIVE STYLESHEET 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 670px) {
}
@media only screen and (max-width: 492px) {
}
@media only screen and (min-height: 700px) {
}
*/