I can’t understand the difference between percentage and px in CSS

Asked

Viewed 58 times

-3

Good morning! I’m creating a simple menu (header), but I can’t understand when I use px or percentage. For example: this is the header I created:

inserir a descrição da imagem aqui

I put the following settings on it:

.header {
position: fixed;
top: 0;
width: 1919px;
height: 80px;
background: #f13c78;

In case I want this menu to work on tablet and cell phone too, so I do not know if it is right to use px there or if I should use percentage, also do not know if the resolution there is right or if everything is wrong.. please help, I know it’s a basic thing but I’m not getting it at all ;(

I think it was not explained well but my problem is: I don’t know when to use px or the percentage there in 'width' and 'height'

css header

  • Please clarify your specific problem or provide Additional Details to Highlight Exactly what you need. As it’s Currently Written, it’s hard to Tell Exactly what you’re asking.

  • ready corrected, gave to understand now?

  • 2

    When using percentage, always look at the parent element, because it will be the reference, since the percentage must necessarily refer to the value of something, ie, as many percent of how?. Already the px is a fixed value that does not depend on anything.

  • 1

    An example: if I put a div inside a div and set 50% width on the div daughter, then she will have half the width of the div mother.

  • Hi, thanks for the answer! But what about when I create a header, for example? will I have to use px? and then in a sub header I use the percentage? I don’t understand well

  • There’s no "required" part. You use what makes the most sense, depending on what you need to do. Want the fixed size, use px, or relative, use percentage (in general lines, of course, remembering that still has the em, rem, etc). There is no formula ready, everything depends on each case. See more: https://answall.com/q/14217/112052 | https://answall.com/q/106962/112052 | https://answall.com/a/272537/112052

Show 1 more comment

1 answer

0

This depends a lot on what you want to do and the person you are doing it. It is a long discussion that has been beat many times. The percentagens are advantageous because it is the percentage of the screen or (in 99% of the cases) of the element Parent(parent), ie it is a dynamic unit of measure, which makes it more Responsive, the PX in my opinion should only be used for small things like margen, paddigs and the like, there are still those who use REM to replace percentagens/PX. You must understand that the % are dynamic and adapt/adapt to the parent element, the PX are static whatever the screen size the element will always have the same size in PX. You can read more about this at https://www.w3.org/Style/Examples/007/units.pt_BR.html

Browser other questions tagged css header

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