Adjusting UI based on media queries

Using media queries

With the use of media queries you can create a responsive user interface that will adjust automatically as the size of the available rendered webpage changes.

By using information from the browser, you are able to determine how to present your content so that it provides a user-friendly experience on any device.

There are two types of media queries:

responding to viewing dimensions
responding to device constraints

The following code demonstrates the device and viewing media queries:

<head>
<style type="text/css">
   .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:30px 30px 10px 30px;
        background-color: #f7f7f7;
        border:1px solid #555555;
        box-shadow: 0 1px 7px 2px rgba(0,0,0,0.2);
        font-size:18px;
        }
    .section-2 .tutorial-1 h2{
        font-size:26px;
        margin-left:0px;
        }
    @media only screen and (max-width: 1024px) and (max-height: 768px) {
        .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:20px 10px 0px 10px;
        }
        .section-2 .tutorial-1 h2{
        font-size:23px;
        }
    }
    @media only screen and (max-device-width: 480px) {
        .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:20px 10px 0px 10px;
        }
    }
</style>
</head>
<body>
    <section class="section-2">
         <div class="col-sm-6 col-md-6">
             <div class="tutorial-1">
                 <p class="text-center">  <i class="fa fa-3x fa-html5"></i></p>
                 <hgroup>
                     <h2 class="text-center" title="Exam 70-480 Programming in HTML5, 
                         CSS3 and JavaScript">HTML5, CSS3 & JavaScript</h2>  
                     <h4 class="text-center text-danger">Exam 70-480</h4>
                 </hgroup>
                 <hr />
                 <p class="text-center">
                     The tutorial covers some of the topics and skills that are the 
                     subject of the Microsoft certification Exam 70-480
                     Programming in HTML5, CSS3 and JavaScript.
                 </p>
                 <a href="#" type="button" class="btn btn-danger center-block">
                     GO TO TUTORIAL
                 </a>
             </div>
         </div>
    </section>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.1/
                                 css/bootstrap.min.css">
</body>

Media queries for desktops or laptops screens

The content of web applications is different and you need to apply the default layout to larger screens to obtain a more friendly user interface.

The following CSS code demonstrates the media query for desktops or laptops screens:

<head>
<style type="text/css">
     @media only screen and (max-width: 1024px) and (max-height: 768px) {
        .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:20px 10px 0px 10px;
        }
        .section-2 .tutorial-1 h2{
        font-size:23px;
        }
    }
</style>
</head>

Media queries for tablets screens

When the screen gets smaller, on a tablet for example, the user interface starts to get less user friendly. To accommodate a tablet screen, you can adjust the layout a bit:

The following CSS code shows the media query for tablets screens:

<head>
<style type="text/css">
    @media only screen and (max-width: 1199px) and (max-height: 401px) {
        .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:20px 10px 0px 10px;
        }
        .section-2 .tutorial-1 h2{
        font-size:23px;
        }
    }
</style>
</head>

Media queries for smart phone screens

After applying the media queries for desktop, laptops and tablet screens, you also need to apply the media queries to small phone screens

The following CSS code demonstrates the media query for phone screens:

<head>
<style type="text/css">
    @media only screen and (max-width: 400px) {
        .section-2 .tutorial-1{
        padding: 20px 20px 50px 20px;
        margin:20px 10px 0px 10px;
        }
        .section-2 .tutorial-1 h2{
        font-size:23px;
        }
    }
</style>
</head>

Making CSS media queries external

Typically, a website has multiple pages with styles shared across different pages. As a result, you will likely be linking an external CSS file to your HTML page.

The link element supports media queries as well, which in turn lets you share a CSS file across multiple pages.

To achieve this, move the CSS from each media query into its own CSS file and link in your CSS files in the following way:

The following code demonstrates this:

<head>
<style type="text/css">
    <link rel="stylesheet" media="screen and (min-width: 1024px)" href="Desktop.css"/>
    <link rel="stylesheet" media="screen and (max-width: 1199px) and (min-width: 401px)"
          ref="tablet.css"/>
    <link rel="stylesheet" media="screen and (max-width: 400px)" href="phone.css"/>
</style>
</head>

Ads Right