Responsive web design + media quaries. How to layout adaptively?

Question

css

Hello everyone, in the course of studying adaptive layout, I came to a small dead end. Namely, how to adapt the internal elements - headings, logos, etc. ?
I make a fluid layout + fluid images and add media queries. Everything seems to be fine, but I get a lot of media (11 pieces), every 200px the content falls out of the blocks. Tell me how to get on good in this topic?

Answer 1

You need to look at the entire layout in general. But there is another question, do you use frameworks like bootstrap? If not, then look what it is, I advise. You will write less code

Answer 2

Try it this way

@media (min-width: 320px) and (max-width: 480px) {
  
  //CSS
  
}

Answer 3

Right now, TWO requests are relevant, which 11??!!!!!! Well, the end of THREE.

@media (max-width:1199px) {} //редко использую
@media (max-width:991px) {} //довольно часто юзаю вась
@media screen and (max-width:767px) {} //то что дохтор прописал
@media (max-width:479px) {} // для маньяков)))

the main trick, which you could have peeped long ago in the same bootstrap - the main container is made 100% wide + the limit for screens above 991, for example max-width=1040px - EVERYTHING!!!
my version is checked in every project on real devices (afoni everything from 4s to eight, apple tablets everything, a couple of apple beeches, samsungs 4 smarts and three tablets, for the eyes !!) so don't listen to anyone, Alex-1917 is talking !!