Kioskea
Recherche
Ask a question »

Adjusting your websites to fit all types of resolution

February 2015

Webmasters can create a webpage that can be opened by a web browser properly, irrespective of the computer screen's resolution. Adjusting a website to fit all types of resolution can be done by simply using the concept of relative width of a webpage. The relative width of a webpage changes with the screen resolution of the computer screen which is used to view the web page. By defining the width in percentage and not in unit number, the page can adjusted according to the percentage defined.The minimum width or maximum width property can also be used while adjusting the website to fit all types of resolution.

Adjusting your websites to fit all types of resolution


Issue

I want to adjust my website to suit a users screen resolution.

Solution

You need to apply a relative width to the page. This means it will change according to the user's screen size.
  • The most common way to do this 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.
  • Or you can set the width you want - e.g. 90% or 80%
  • If you define a smaller width, you can focus with "margin: auto".


Note:

You must define a width as a percentage because this calculates the value relative to the width of the window as opposed to a fixed measurement.

You can set a minimum and maximum width for the page, although:
  • Minimum width is not supported in Internet Explorer
  • Setting a maximum width can make a page look odd on larger screens as it won't fill the screen.


Example:

A page width of 90%, centered, with a minimum width of 600 pixels and a maximum width of 2000 pixels:
  •   body{width:90%;margin:auto;min-width:600px;max-width:2000px}
For unlimited offline reading, you can download this article for free in PDF format:
Adjusting-your-websites-to-fit-all-types-of-resolution.pdf

See also

In the same category

Webmaster - Adapter un site à toutes les résolutions
By Ssylvainsab on November 17, 2006
Original article published by Ssylvainsab. Translated by jak58. - Latest update by Jeff
This document entitled « Adjusting your websites to fit all types of resolution » from Kioskea (en.kioskea.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.