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...

回答1:

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%'
}

回答2:

What you're looking for is the browser "viewport".

This link offers a good overview of how to obtain the viewport: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

In most standard browsers, you can just reference window.innerWidth and window.innerHeight in JavaScript.

If you are using the dojo JavaScript framework, then you can just call dijit.getViewport() which will do the heavy lifting for you.

Once you have the dimensions of the viewport, it's up to you to decide how your webpage will react to the information it receives from the browser.

来源：https://stackoverflow.com/questions/4779077/how-to-adapt-website-to-users-screen-resolution