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
I want to adjust my website to suit a users screen resolution.
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:
- 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".
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.
A page width of 90%, centred, with a minimum width of 600 pixels and a maximum width of 2000 pixels:
Original article published by Ssylvainsab
. Translated by jak58
. - Latest update by Jeff