What is the correct adaptation of the site?

Question

css

There is a site - completely not adaptive. What is the best way to make it responsive?
Just use media queries? for 320,480, 768px (for example) Wouldn't this, so to speak, be talking about some kind of unprofessionalism? Or is this common practice in such cases?
Or is there some kind of technology.
bootstrap will not work, because you will have to re-layout the site.
And another question with the menu in the header of the site. It goes off screen. To make a hamburger, do you really have to retype it?

Answer 1

You can use "step" reduction.
By squeezing the site window, look at what screen resolution the layout "breaks" and reduce / move / turn off the layout elements.
The approach is painstaking, but does not create problems in the form of transfers to bootstrap.
But for the most part, much better than the same adaptation of the site to a simple bootstrap.
The number of "steps" and the size of the "step" is always determined individually.
There is no ready-made "tablet" with this recipe.
I tend to use 50 or 100 px increments most of the time.
The advantage of this method is the ability to conveniently place all adaptive elements in a separate css file.
You can call it whatever you like, I always have media.css, it is connected after the main style file.

@media screen and (max-width: 1200px) {
    .content {
        font-size: 50px;
    }
}
@media screen and (max-width: 1000px) {
    .content {
        font-size: 44px;
    }
}