Z
Z
zwezew2018-08-13 12:10:48
css
zwezew, 2018-08-13 12:10:48

What is the correct approach to writing media queries for site adaptation?

What is the correct approach to writing media queries for site adaptation?
For example, we have a website page that needs to be adapted. From 1920 to 1366, let's say it adapts without media queries, thanks to a flexible grid.
Then the blocks begin to fall out and then the fun begins (no)
If the approach is not mobile first and create points for permissions for specific devices (for example, taking from the chrome debugger) - 1440, 1024, 768, etc. - the site can fall apart (not quite the right word, rather, the blocks will simply crawl out of the boundaries of the containers or shrink like the endoskeleton of the first terminator) BETWEEN them, i.e. got to 1440, made an adaptation to 1440, and between 1440 and 1024 it can be hell.
If you use the approach "take the page, reduce it, write points where there is disorder" - it turns out to be unnecessarily cumbersome and time-consuming, especially considering the fact that there is no design for mobile devices, the design initially did not particularly take into account mobile devices and the restructuring of blocks and was made according to the principle "shove all this in the right resolution".
Recently, the idea has come up if not mobile first layouts (because no one will simply draw a mobile version), then start adapting the site from low resolutions, i.e. do not gradually reduce the page, but immediately set the minimum resolution and start writing media queries from it and up.
Who that can prompt or advise?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton fon Faust, 2018-08-13
@bubandos

Take the transition points as a basis, as in the bootstrap, if you do not know which ones to take.
Well, and, yes, you need to do it from the lower border, i.e. make a media query under 1024 and before 1439 the page is stretched in width. At 1440, apply the following media query.
etc.

V
Viktor Burdale, 2018-11-05
@Vlobik

Coming from bootstrap 4, I realized that it’s better to really make up from a small device to a larger one. I take the resolution points from them, but often add a media query for max-width: 320px.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question