When to use PX or % in positions?

Asked

Viewed 1,035 times

0

On internal layout elements, to position in margin or coordinate, when to use PX and %?

css positioning
  • 5

    I don’t know if that’s all you really want to know, if it’s not, elaborate more on the question, but the answer would be just: use px for layout fixed and % for layout fluid, adaptable.

1 answer

4


Depends on your need and layout context. If it’s a responsive layout use % to determine positioning. If it is a static layout, use PX.

Remembering that % is a dynamic unit of measurement, that is, the element with percentage positioning will vary according to its parent element, for example:

<div id="elemento_pai">
   <div id="elemento_filho"></div>
</div>

#elemento_pai {width:100%; height:100%}
#elemento_filho {width:50%; height:100%; margin-left:50%}

This example will cause the child element to change size and positioning according to parent element, always keeping the left base of the child element aligned to the center of the parent element.

And the unit of measurement in PX, is a static unit of measure, that is, it does not change according to some parent element, it by itself already defines the positioning and size of the element without relying on another element, thus a positioning with PX will remain static exactly where it is set.

  • But if I use media queries for each resolution pattern in px. It would work?

  • 1

    @ropbla9 In this case you would have a fixed size for each resolution. It would change size instead of passing from one resolution to another, but within the resolution the size would be unchanged. Already with % any resizing of the browser window would cause the element to change size, without breaks.

  • Yeah. But if the screen is too small it turns out that everything will be too small in the original structure, correct?

  • Yes, everything would be small. This would be well relative to the size proposed in each media querie.

  • But to make a media querie for each resolution I would advise you to think about making your layout with percentage, avoid you much code.

Browser other questions tagged css positioning

You are not signed in. Login or sign up in order to post.