What is the difference between px and %?

Answer 1

suppose your code is
<hr width="50px"/>
<hr width="50%"/>
The first horizontal line will have a length of 50px. Where as second line's width will depend upon the device on which the page is viewed.
suppose u are viewing the page on a phone with 300 px width, the width of our second line will be 50% of 300 i.e 150px. Likewise on 800px display it will be 400px.
Am I clear?!

Answer 2

Different ways to measure.

Pixal- a minute area of illumination on a display screen, one of many from which an image is composed.

Percentage- any proportion or share in relation to a whole