How to implement CSS breakpoints 100% correctly

In the coming minutes, I want you to forget about CSS. Forget web development. Forget the user interface (UI).

When you have forgotten all these things, I want you to expand your mind, to talk wandering. Wandering back to the past. Back to the early days of schooling.

Back then everything was so simple, the days when everything you need to worry about is … drawing shapes, and … repressing your rebellion.

Look at the dots above. Do you see some dots sticking together, and some spread out? What I want you to do is separate them into five groups to help me, any kind of separation.

Try it out. After making sure no one is looking, draw a circle around each group with your "child" finger.

Are you sure the group is split like the one below?

Obviously, the two dots on the right may have all kinds of groups. If you group them together, it's probably not wrong. They say that there is no wrong answer, but I have never been wrong, so I have never felt that tedious statement.

Before continuing, do you draw a group like the one below?

Probably not?

But that's basically what you have to do if you set the breakpoint at locations that match the exact width of common devices (320px, 768px, 1024px).

Have you heard or talked about the following troughs?

"Is the average breakpoint up to 768px, or even 768? Understood … and that's the width of the iPad, or "big"? Oh, big is 768px and up. Understood. And small is 320px? What is the range from 0 to 319px? Breakpont for ants? ”

I can continue to show you the correct breakpoint and end the article right here. But I was very curious because the method ("silly group") was so widespread.

I think the solution to this problem, like other problems, is from using the wrong term.

I think we have confused the "boundary" with "scope" in the discussion and applied breakpoints.

Suppose, if you execute breakpoints in Sass, do you have a variable named $ large with 768px?

Is that the lower boundary of the range you want to do 'big', or the upper boundary? If it is the lower boundary, then you will not have $ small as this will be o right?

And if it is the upper boundary, how do you define a breakpoint $ large-and-up? That must be a media query with a min-width of $ medium, right?

And if you're only talking about a boundary when you say 'big', then we'll be pretty easy to follow later because a media query is always range .

This is a blind situation and we are wasting time thinking about it. So I have 3 suggestions as follows:

  1. Make breakpoint properly
  2. Name the range to be reasonable
  3. Clear declaration

Tip # 1: Make breakpoint properly

So how is breakpoint correct ?

Your kindergarten spirit has already drawn circles. Now I just need to make them rectangular for the members.

600px, 900px, 1200px, and 1800px if you intend to give a special gift to those who own a giant screen.

The dots that you play with your baby's soul actually show the 14 most common screen sizes:

To make it easier for you to communicate, we can follow the common screen name below:

Tip # 2: Name the range to be reasonable

Obviously, you can name your breakpoint as papa-bear and baby-bear if you want. But if I sit down with the designer and discuss the shape of the site on various devices, I want the conversation to be finished as quickly as possible. If that is the name of the tablet poirtait size (vertical tablet), it's fine if I do it. If you call it "iPad portrait", I will completely forgive.

You can shout: "But the market has changed!". "Phones are getting bigger and bigger, tablets are getting smaller and smaller!"

But your website's CSS has a shelf life of three years (if not Gmail). iPad has appeared with twice that time, which has not been overthrown. And we all know that Apple doesn't make any new products, but just removes a few things from the existing ones (buttons, holes, …).

So you guys, 1024 × 768 are far from obsolete.

Conclusion: communication is very important, but do not deliberately alienate words that are easy to find useful.

Join the Machine Learning event - Technology of the Future!
Join the Machine Learning event – Technology of the Future!

Tip # 3: Be declarative

Your CSS must determine what will happen, not how . The "how" section should be hidden in certain mixins.

As mentioned earlier, part of the reason causing disorder in the variables determining the breakpoint is of a limited scope and is used as the name of the scope. But it is the same as saying var coordinates = 4;.

So we can hide these details in a mixin, instead of exposing them to use directly in the code. Or we can do better and don't use any variables at all.

Here is an example that has been simplified but still illustrates all the cases. To see how they work, go to this pen .

Note, I am forcing developers to define good -up or -only postings.

The obscurity creates confusion.

One obvious criticism is that this method does not handle the custom media query. Oh good news everyone. If you want a custom media query, write a custom media query. (In fact, if the need for a higher degree of complexity is the same, I will put that debt away and run into the loving arms of the toolkit from Susy ).

Another mistake might be that I forgot about 8 mixins here. Obviously a single mixin will be extremely crazy action, so only the 8 size pass required, as follows:

Porch, effective. You will not see an ompile-time errors if you include an unsupported name. And entering the sass variable means exposing 8 variables just to pass to an internal switch in a mixin.

Not to mention the @include for-desktop-up {...} syntax is the most beautiful ones @include for-size (desktop-up) {...}.

These codes all have one flaw when I type 900px twice, and 899px. Obviously I should only use variables and subtract 1 when needed.

If you want, go ahead, but I won't, for two reasons:

  1. These things don't change often. These are not numbers used elsewhere in the code base. There is no problem caused by the fact that they are variable — unless you want to expose Sass breakpoint with a script that injects JavaScript objects into these variables in the page.
  2. The syntax is horrible when you want a string variable with Sass. Here is the price you pay because it is a terrible crime to repeat a number twice:

I'm also very sympathetic to you guys who are so foolish as to do miraculous things like storing breakpoints in a Sass list and repeating them to output media queries, or something so ridiculous that future programmers difficult to interpret.

Bug is often hidden in complicated places.

Some other tricks when working with breakpoints

Well, even flickr also has breakpoints at 768 and 1400

Well, even flickr also has breakpoints at 768 and 1400

  1. If you need to experience CSS breakpoints for larger screen sizes than you are using, use 'responsive' mode in Chrome DevTools and type in huge sizes as you like.
  2. Blue bars show media querries max-width, orange bars are min-width (minimum width), and media query green bar with both min and max.
  3. Clicking on the media query will bring the screen to that width. If you click multiple times and media queries green, it will switch between maximum and minimum widths.
  4. Right-click on a media query strong media query to navigate to the definition of that rule in CSS.

ITZone via Medium

Share the news now