4.6 KiB

Raw Blame History

Making Our Website Responsive

Responsive Design adapts to the device of the user who's visiting our website.

Understanding Hardware Pixels Vs Software Pixels

The browser don't understand the differnce between a desktop device and a mobile device. Modern mobile devices have hardware pixels identical to that of the desktop displays. We can change the hardware pixels on mobile devices to software or css pixels using the viewport meta tag. Which adjusts the pixels using a pixel ratio.

We can add the viewport <meta> tag as a first step to make our website responsive.

    <meta name="viewport" content="width=device-width, initial=scale=1.0">

Comparing The `viewport` Metatag (HTML) And Media Queries (CSS)

Let us see the difference between both, and also understand why we need both to make our website responsive.

Viewport	Media Queries
Adjust site to device viewport	Change design depending on size
No design changes	Design changes defined by us

Understanding The `viewport` Metatag

We can define different properties in the content attribute of the viewport metatag.

    <meta name="viewport" content="width=device-width, initial=scale=1.0, maximum-scale=2.0, minimum-scale=1.0">

Which are mostly to control the behavior of zoom level or scaling, e.g. initial level of zoom, minimum or maximum level of zoom etc.

Designing Websites Mobile First

We usually start creating a website using the mobile first approach. Which simply means we develop our websites in a way that looks nice on mobile devices first. Because we live in a mobile time, and most users will be visiting our websites through mobile devices.

The opposite approach, which isn't recommended, would be desktop first.

Adding Our First Media Queries

The way we add media queries is using the @media annotation followed by a condition in our css, the condition should evaluate to true for the media query to be applied.

@media (min-width: 40rem) {
    /* the body of media query inludes regular css code - e.g. we can define css selectors here to overwrite */
    #product-overview {
        height: 40vh;
        background-position: 50% 25%;
    }

    #product-overview h1 {
        font-size: 3rem;
    }
}

As a common practice, we keep our media queries at the end of our css files or code to keep it structured.

Things To Keep In Mind When Working With Media Queries

Think of media queries as conditions, that if evaluates to true, the code inside the media query is applied.
As we are following the mobile first approach, the code outside of media queries will specify the look of our website on mobile devices.
We can have more than one media queries at the same time to specify different limits.
When using multiple media queries, order really matter so order them from smaller to bigger values, otherwise the media query defined after will overwrite changes.

Finding The Right Breaking Points

Once again we can use mydevice.io and go to the Compare Devices section to find the right breaking point for our media queries.

Creating The Mobile First Design For Our Plans

We can go to our .plan {} class selector and remove the display: inline-block; property to make it a block level element, because we are following the mobile first appraoch, so making all the elements work for a mobile display first.

Making The Plans Responsive

Following media query is applied for desktop version of the website, because we are following a mobile first approach, we are only using media queries for desktop design:

@media (min-width: 40rem) {
  .plan__list {
    width: 100%;
    text-align: center;
  }

  .plan {
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    min-width: 13rem;
    max-width: 25rem;
  }

  .plan--highlighted {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
  }
}

Working With Logical Operators

We can use the logical operators between multiple conditions in our media queries, e.g. the following media query will be applied if both of the conditions are true:

@media (min-width: 40rem) and (min-height: 60rem) {
    ...
}

@media (min-width: 40rem), (orientation: portrait) {
    ...
}

Note that we can also use , comma separated list of conditions, instead of the and operator.

Positioning Our Footer Correctly

main {
    min-height: calc(100vh - 3.5rem - 8rem);
}

Here, 3.5rem is the height of the top navigation bar, and 8rem is the height of the footer.

4.6 KiB Raw Blame History