Bootstrap or media?

Question

Layout

Hello!

I know that the question has long been beaten and so on, but I decided to return to it anyway.
I already know how to create high-quality pages, and I can also use JS for various animations. In general, I sit and typeset the page, and then when I'm done, I need to do an adaptive layout. I went on the Internet to look at the breakpoints for the adaptive and realized that there are a lot of them: 576px, 768px, 992px, 1200px, 1680px, 1920px, 2560px, 3440px and 4K
( 3840px ) media queries for this very tedious and long work.
So I want to hear from you advice is better to suffer with media queries or for the front-endbetter to use bootstrap grid. Or maybe it is better to use bootstrap for the full creation of the site, and not just for adaptive? It's just that it's quite difficult to learn and memorize all these classes in bootstrap, BUT I'm ready!
In general, a short question: media queries vs Bootstrap (for adaptive) vs Bootstrap (for full site creation ( if possible in more detail ))?

PS If you learn bootstrap for the full creation of the site, I do not mind, there is a lot of strength and desire to learn and develop!
Thanks for the advice!

Answer 1

Hey!
In bootstrap, you can also change the values ​​of variables for breakpoints, add your own, and so on.
What values ​​to take, if they give a design for layout, it is better to check with the designer, if you make a joint decision, you need to look at potentially from what resolutions they most often come in, and do it under them so that it fits well. Well, if adaptive, in theory, it should look normal at all resolutions, usually 3 breakpoints are enough for me, there were 4 a couple of times, but it was a very vicious design with different layouts for each and every element in different places (and one resolution for personally gender monitor :-D), in general it was terrible, the average design is usually simpler.
There are five breakpoints in bootstrap 4: xs, sm, md, lg, xl, should be enough. Usually I type in bootstrap, it’s easier for me because of the time savings, because there are already styles for all sorts of ie and mobile phones. And so what is there that there are media queries.

Answer 2

Most sites don't need breakpoints of 2560px, 3440px and 4K (3840px), especially if you're doing Mobile First. If you start building websites from the mobile version, then you will need to write less styles, this will slightly increase the speed of layout.
For many elements, the width can be set as a percentage, which also reduces the number of styles and layout time.
If, as you write, you already know the layout well, then it will not be difficult to learn Bootstrap. You just need to set aside a few days.

Answer 3

To work normally with bootstrap, you need to understand how it works, and knowledge of media queries does not negate this.
All of the listed breakpoints are most often not needed, in most cases 3 is enough (mobile, tablet, desktop).

Answer 4

Light like a wedge chtol converged on this bootstrap? It is difficult to come up with a more buggy framework.

Answer 5

media

Answer 6

The choice depends on the design and the requirements of the customer .. The designer can not bother and draw everything according to the bootstrap grid .. he can draw using its elements .. or he can make it so that bootstrap cannot be used with all his desire .. And the customer can specify what is possible what cannot be used and what must be used..
So .. and why or or .. using botstrap does not cancel media it just makes some things easier ..

If you learn bootstrap for the full creation of the site, I do not mind, there is a lot of strength and desire to learn and develop!

and also learn sass BEM js flex & grid

Answer 7

Do like everyone else. A static desktop version and a separate static mobile version on the m. And maybe a mobile app.
do not waste time on adaptability - no one needs it, and it takes a lot of time.

Answer 8

I went on the Internet to look at the breakpoints for the adaptive and realized that there are a lot of them: 576px, 768px, 992px, 1200px, 1680px, 1920px, 2560px, 3440px and 4K (3840px)

No, well, not exactly like that. For example, I use up to 992px (up to the tablet version), up to 1200px (up to the netbook version) and there, by choice or need, I use 1440 or 1920 but rarely.

I am sure that more breakpoints will be needed for high-quality layout, but every time to write media queries for this is a very tedious and long job.

Well, just the same, the more "breakpoints" the more it is an indicator that your layout floats absolutely everywhere. I made landingos on flex, where in the adaptive I just shifted the blocks one by one and everything was fine and nothing fell off. Unless, of course, we are talking about custom design.

So I want to hear from you advice is it better to suffer with media queries or for the front-end it is better to use the bootstrap grid.

If you were making up on flex, you would not have such a question, if on grids it’s more tembole. For there, according to the properties, it is already clear that flexi is better than bootstrap.