rafaelkyrdan October 20, 2013 at 20:15

Tips for using media query

Introduction

In the article, I gathered tips on using media query. I’ll tell you how to use media query as efficiently as possible. At the end of the article there is a list of sources used.

External connection media query
More than just viewport size
Not only smartphones
Media query tool
Highlight specific
Breakpoints when and how much?
Minor breakpoints
Relative Units
Conditional Download
List of used resources

External connection media query

< link href="test.css" rel="stylesheet" media="only screen and (max-width:480px)" />

Browsers that do not support media query will not load these styles, but supported browsers will load everything regardless of whether they are necessary or not.

But still there is one feature - the browser does not load background images defined in styles that are not currently in use.

< link href="css/test1.css" rel="stylesheet" media="only screen and (max-width:480px)" />
< link href="css/test2.css" rel="stylesheet" media="only screen and (min-width:480px)" />

test1.css

body {
  background: url("../img/bg1.png");
}

test2.css

body{
  background: url("../img/bg2.png");
}

Depending on the size of the screen, one background image will be loaded.

More than just viewport size

The width of the viewport is not the only thing that can be determined using the media query. There are many other functions that can be defined, including: device proportions, orientation, resolution, pixel density and more.

Many of them are very useful:

- pixel density is useful if you want to use background pictures and icons adapted for screens with a high pixel density.

- orientation determines the device in portrait or landscape mode at the moment. It can be used to disable the fixed positioning of some elements.

- height available height, can be used for optimization so that the content is displayed completely without gaps in one screen.

I recommend referring to the documentation For a complete list, I think this will help you make your interface more flexible.

Not only smartphones

Have you noticed how ugly some sites look on modern large monitors? The first association associated with the media query is the creation of an interface only for smartphones. The combination of media query and multi column will help to display your site beautifully on large monitors.

How often do you use such a breakpoint?

@media all and (min-width: 1300px) {
     /* ... */
}

Media query tool

There are many browser plugins that help develop responsive design, but in my experience the best tool is Responsive Mode, which was added with version 15 of Firefox.

Highlight specific

The lack of media query is actually a media query. This tip is part of the mobile-first strategy, according to which. Instead:

/* Desktop-first */
.column {
    float: left;
    width: 30%;
}
@media all and (max-width: 40em) {
    .column {
        float: none;
        width: auto;
    }
}

It is better to define only specific rules only where necessary:

/* Mobile-first  */
@media all and (min-width: 40em) {
    .column {
        float: left;
        width: 30%;
    }
}

As a result, we got simple and easy to maintain code. Also, such code is more suitable for older mobile browsers that do not support media query.

Breakpoints when and how much?

So historically, breakpoints have been tied to the sizes of popular devices. (iPhone = 320px portrait, 480px = iPhone landscape, etc.). But what we see now - the sizes of devices are constantly changing, more and more devices with non-standard sizes appear. What is the standard like? The web is constantly evolving, so it's our job to create interfaces that look and work perfectly on any screen.

So where to place breakpoints and how many are needed?

Let the content determine when to set the breakpoint and how much is needed. Start with a small screen, and then expand until you see that it's time to set a breakpoint. Define breakpoints for your design, not for a specific device.

Minor breakpoints

Sometimes it happens that not all design elements fit into certain breakpoints. That is, too global changes are happening and there are two ways out: the first, not very desirable, to change already defined breakpoints or change the design; and second, more pragmatic, to identify secondary breakpoints within the global breakpoint.

On the one hand, this complicates the styles, but no one says that you would use minor breakpoints for all elements. Use only where you lack flexibility.

Relative Units

Instead of using fixed sizes, it is better to use relative units to define breakpoints. The topic of using relative sizes in layout has already been repeatedly revealed on the hub. Here is a partial list of articles: here, here, here. I’ll give you only the most important argument - this will allow browsers to change the design depending on the level of the established zoom size by the user, as a result of which the user will see a more pleasant, more accessible site for viewing.

Conditional Download

Conditional loading is a very powerful tool that allows you to prioritize content, improve productivity. The essence of this technique is that the client decides what content to upload and in what order. Suppose you upload pictures asynchronously using javascript, and you use adapted pictures for different screen sizes. The question is how can javascript find out what kind of content you need to download at the moment?

For this we can use matchMedia . matchMedia allows our javascript to determine all the properties available through the media query.

It looks something like this:

if (window.matchMedia("(min-width: 60em)").matches) {
    /* load something */
}

An alternative technique is also worth exploring.

List of used resources

Tags: