Search code examples
cssscreen-resolution

css different resolution em or px

I have a designed a website.I am new to css, html, php so in css I have used all sizes in px. But when I change the screen resolution, webpage content is not proper, meaning its like:

When I zoom out this is the result how to handle this in css?? When I googled about same I found that instead of using px I should use em / %.

What is to be used?

  1. em
  2. px
  3. %

for widths and heights.

Edit1

after zoom out

Solution

  • Websites having a percent (%) width for the main content area is not adviced because of the inconsistency. It's best to use a pixel width of about 960 pixels, maybe a bit less, for the whole website, so that it will work for all resolutions.

    As for elements inside the main content area, it is better to use percent widths because it doesn't make sense to both with calculating the exact pixel values. The result is set fixed, because the thing that it's a percentage of parent's fixed width, as opposed to the monitor's resolution, which varies between users.

    To sum up:

    It is better to use a fixed width parent with a wrap of 960px and use fluid (%) element widths inside the wrap.

    Sample code:

    To get started, you can use this sample code:

    HTML:

    <div class="wrap">
    <!-- Other Elements -->
</div>

    CSS:

    .wrap {margin: 0px auto; width: 960px;}

    For more information, do check out this question on Programmers: https://softwareengineering.stackexchange.com/questions/135506/percent-or-pixels-html-css