Html/css to fit all screen resolution

HTML-CSS
#1

Hello, I develop websites for a while already and I ask the following question: how to adjust our site for any resolution? (computer, cell phone, etc.)
I use css in% instead of px, but if possible I would like to go further in my thinking.

any video or websites linking can help

thank you

#2

You need @media queries.

You can specify specific values depending on the user’s device dimensions.

For example:

@media screen and (min-width: 320px) {
   .title {
       font-size: 1.6em;    // I want my title this size on a phone
   }
  #menuArea {
      width: 100%;  
  }
}

@media screen and (min-width: 600px) {
  .title {
       font-size: 2em;    // I want my title this size on a bigger tablet
   }
  #menuArea {
      width: 80%;
  }
}
#3

I agree with the previous poster. Use media queries, bootstrap, flexbox(which bootstrap uses). I don’t ever use %'s. They don’t seem as efficient. You can also use vw and vh units for some size. (viewport width and viewport height.

#4

ok thx guys i will try this out and investigate more

#5