Responsivity

CSS is used to make content responsive, as in - adjust the size or position according to the device or more precisely, the screen that it's currently being rendered on. Previously we looked at how Bootstrap does responsivity and how to write media queries.

In this post, let's look at how to do more with the same media queries. You might find this post about how to simulate mobile devices via the Dev Tools to be useful too.

Is it important to test all of your pages for responsivity?

Of course. Google takes responsive websites more seriously in their indexing, you might have noticed they provide the information about any violations in their PageSpeed Insights tool, that I talked about in this post.

In addition, mobile devices have a 56% share of online traffic as of 2021 "BroadbandSearch" data.

While the task might seem tedious, there are services that allow you to mass-test on multiple devices automatically, like BrowserStack.

An automated test is convenient, but to truly get the result of your code, I would suggest to test your pages manually, on mobile devices.

Simulators only go so far.

Media Query Types

You can see all of the types in the MDN "Media Queries" page. As well as the features and other details.

Let's also bring in the example that we used in the first time I mentioned them, for comparison:

@media only screen and (max-width: 850px) {
    /* Your CSS here */
}

So as you see in the docs, we used the @media CSS rule:

@media

and the "screen" media type along with "and (max-width: 850px)" a media feature.

So the CSS within this media query will apply only to screens of 850px or less.

@media only screen and (min-width: 850px) {
    /* Your CSS here */
}

You can also target screens of width 850px and above, by just changing the media feature from "max-width" to "min-width".

Additionally you can do both at the same time:

@media only screen and (min-width: 850px) and (max-width: 1600px) {
    /* Your CSS here */
}

So now the CSS rules provided inside will only taget screens between 850px and 1600px in width.

What are the perfect sizes to use?

The answer to this is simple - there aren't any perfect ones.

I suggest looking at what sizes Bootstrap uses for their "container widths" and align to that. Especially if you use Bootstrap itself because it will ease merging the pre-defined design provided by the team behind Bootstrap with your own designs.

If you're using a different frontend framework, I'd suggest checking their docs and search for the term "Grid".

Generally, you should use less absolute values, like:

.my-class {
    width: 650px;
}

The above example will have the element with the "my-class" added to it, be 650px in width regardless of screen size.

There are more tools to make your site more responsive, called "Relative length units".

Relative CSS Length Units

First of all I will just call them "relative values" from now on, for brevity.

So there's quite a list of them, but I wish to highlight only two of those: "vw" and "vh".

Both of those target the viewport (the screen portion of the browser without the toolbars) and so are named as:

  • vw - viewport width
  • vh - viewport height

Now using these allows you to set relative unit values, based on screen size directly.

.my-class {
    width: 50vw;
}

The above code will make the element take up 50% of the viewport, regardless of it's size.

.my-class {
    height: 50vh;
}

Similiarly, the same happens above, but for the height.

.my-class {
    width: 50%;
}

You can also use percentages, but take note that that's going to target the percentage of the direct parent element, not the viewport.

<div class="parent-element">
    <div class="child-element">
    </div>
</div>
.parent-element {
    width: 1000px;
}

.child-element {
    width: 50%; /* Will be 500px */
}

Here is a great post - "CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained" that goes into greater detail about other types too.