Geekly Articles each Day
📜 ⬆️ ⬇️

Media query tips

Introduction


In the article I collected 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 references.




')

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 browsers with support will load everything regardless of whether they are needed or not.

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

 < 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 screen size, one background image will be loaded.

More than just viewport size


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

Many of them are very useful:

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

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

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

I recommend to refer to the documentation for a complete list, I think that 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 media query is the creation of an interface only for smartphones. The combination of media query and multi column will help to display your website 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 Firefox version 15.

Highlight specific


The absence of a 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 have a simple and easy to maintain code. Also, this code is more suitable for older mobile browsers that do not support media query.

Breakpoints when and how much?


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

So where are the 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, and not for a specific device.

Minor breakpoints


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

On the one hand, this complicates styles, but no one says that you would use secondary 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. On Habré, the topic of using relative sizes in layout has been repeatedly revealed. Here is an incomplete list of articles: here, here, here. I will cite only the most important argument - it will allow browsers to change the design depending on the level of zoom set by the user, with the result that the user will see a more pleasant, more accessible site.

Conditional loading


Conditional loading is a very powerful tool that allows you to prioritize content and increase productivity. The essence of this technique is that the client decides which content to download and in what order. Suppose you upload images asynchronously, using javascript, and you use adapted images for different screen sizes. The question is how javascript can 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 like this:

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

An alternative technique is also worth exploring.

List of used resources


Source: https://habr.com/ru/post/198292/

More articles:


All Articles