Adjusting your websites to fit all types of resolution

"How to adjust my site to the visitor's resolution and what resolution to choose?"

Simply apply a relative width (= that changes with the size of the window and screen of the visitor) to the page.

The most common is to use the body tag.
You can adapt it if you use a div # body or another.

To adjust the page size, use this CSS code:

body{width:100%;}

With this code the page will take 100% of the window, regardless of its size.

We can obviously set the width you want (90%, 80%, etc.).

If we define a smaller width, we can focus with "margin: auto".

Note

You must define a width in%, and no other unit, because the% calculated as a percentage relative to the width of the window as opposed to other units which correspond to heights of line (a predefined size ).


While it is important that your page is not smaller than a certain size, one can use the min-width property (which does not work in IE).

You can also use max-width to set the maximum size.
(I do not recommend this practice because it is not pleasant to have a page that is smaller than the window I think)
Example

A page width of 90%, centered, a minimum width of 600 pixels and a maximum width of 2000 pixels:

  body{width:90%;margin:auto;min-width:600px;max-width:2000px}