Media Queries (HTML)

https://www.box.com/blog/media-queries-things-i-wish-id-known/




I happened to find a lot of knowledgeable information on Media Queries through box.com.  CSS media queries enable you to apply different CSS styles in your HTML page depending on the device that shows the HTML page. More specifically, media queries enable you to apply different styles depending on the browser window width, device screen width, type of device, aspect ratio and pixel ratio. In many cases it is enough to base your media queries on the browser window width, though.


Here Are Some Examples I Found.


<style>
    @media only screen and (max-width: 600px) {
        /* CSS rules for browser widths equal to or less than 600px */
        body { background-color: #ffffff; }
    }
    @media only screen and (min-width: 601px) and (max-width: 1200px) {
        /* CSS rules for browser widths from 601px to 1200 px */
        body { background-color: #ff0000; }
    }
    @media only screen and (min-width: 1201px) {
        /* CSS rules for browser widths from 1201px and up */
        body { background-color: #0000ff; }
    }
</style>