Media Queries are  elements that control  a webpages presentation over different window/devices that work with the viewport tag that goes in the head of an .html document. Google developer docs has a great article on setting breakpoints (the point at which you want different css rules to kick in) which for those that interested is worth a read 🙂 https://developers.google.com/web/fundamentals/design-and-ux/responsive/

      <!--here is the html thats goes in the head to include the viewport tag -->
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Each media query may include a media type followed by one or more expressions. Common media types include all, screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses. Should a media type not be specified the media query will default the media type to screen.

The media queries below would go after your css rules in your css files with the specific rules for the specified device size. If you need to set a media query for a specific device such as an Samsung Galaxy 5 or iPad2 you will find media query sizes for specific devices here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ but generally being more generic will make website maintenance easier.

The other option for including media queries is to include them as separate files but this more requests made to the server which Google discourages but as with everything you may have a valid reason to setup your media queries this way and it is straight forward as demonstrated below:

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

 But generally setting up your media queries as below in your css file works well.

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }