Search code examples
javascriptcsshtmlresolution

How to adapt website to user's Screen Resolution?

I'm designing my website by using a base of 1024x768 screen resolution. When you're looking at the website in the browser from a computer with a smaller/bigger screen resolution the website starts to deform.
How can I adapt the website to user's screen resolution no matter what screen resolution the user have? I believe it's possible trough JavaScript or CSS, but not sure how...

Solution

  • The best way to tackle this issue is instead of using px use em or % ( percentage ).

    .container {
  width: 1000 px;
  height: 750 px;
}

    .container {
  width: 90%;
  height: 90%'
}