Media Queries

Media queries are used when the site or app need to be modified according to a device’s general type.

Media Query Breakdown

Here is the breakdown of Media Queries

Media Query Example

Below example will demonstrate the basic architecture of Media Queries

<!doctype html>  
            @media screen and (min-width: 480px) {
                body {
                    background-color: #007bff;

          @media screen and (min-width: 600px) {
              body {
                  background-color: #343a40;
                  color: #fff;
        $lt;p>Resize the window and see the magic$lt;/p>