Wie berechne ich Prozentsätze für die CSS-Konvertierung basierend auf Pixeln?

Question

Ich habe diese CSS-Stile:

body { 
    padding: 0; 
    margin: 0; 
    font-family: bentonsans-regular, sans-serif; 
    font-size: 14px; 
    background-image: url(../affiliate/amex/images/background.png); 
    background-repeat: repeat-y; 
    background-position: top left; 
} 

#header { 
    position: fixed; 
    left: 150px; 
    top: 50px; 
} 

#footer { 
    position: fixed; 
    left: 150px; 
    right: 50px; 
    bottom: 10px; 
    height: 100px; 
    line-height: 10px; 
    font-size: 10px; 
} 

Und ich brauche, um sie zu % von px zu ändern, aber ich habe keine Ahnung, wie diese in präziser Art und Weise zu erreichen. Ich habe this gefunden, die von px zu em konvertieren, aber das ist nicht so hilfreich. Seite Könnte mich jemand in die richtige Richtung weisen? Irgendwelche Ideen? Ratschläge? Lösungen?

Answer 1

Es hängt wirklich von dem Kontext, in dem Sie Ihre Elemente leben. Denken Sie immer daran, den einfachen Formel Ziel/Kontext

Das glaube ich nicht, dass du da einen Konverter finden, wie ich sagte, es hängt vom Kontext ab.

Zum Beispiel: konvertieren Prozentsatz ein 300px in einem 1000px Container Sie

300/1000 = 0,3, die 30%

tun würden, wenn die 300px eine Polsterung von 10px hat und Wenn Sie es konvertieren möchten, wenden Sie die Formel unter Berücksichtigung des 300px als Ihren Container (Kontext) an. So

10/300 = 0,0333333333 die 3,3333333% ist (halten Sie die Dezimalstellen)

Für die Schriftgrößen, wenn Sie die Schriftgröße auf 100% gesetzt, die zu 100% beziehen von die Standardschriftgröße des Browsers, die für die gängigen Browser höchstwahrscheinlich 16px beträgt. Für eine genaue Lesung auf Schriftgröße überprüfen Sie dies: The font-size CSS property

Answer 2

Sie können frei prozentuale Breite angeben, aber geben Sie besser "px" oder "em" für die Höhe.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: bentonsans-regular, sans-serif; 
 
    font-size: 14px; 
 
    background-image: url(../affiliate/amex/images/background.png); 
 
    background-repeat: repeat-y; 
 
    background-position: top left; 
 
} 
 

 
#header { 
 
    position: fixed; 
 
width : 90% ; 
 
    height: 100px; 
 
max-width : 600px ; 
 
left: 10%; 
 
right : 10% ; 
 
    top: 50px; 
 
    background: gray ; 
 

 
} 
 

 
#footer { 
 
    position: fixed; 
 
width : 90% ; 
 
    height: 100px; 
 
max-width : 600px ; 
 
left: 10%; 
 
right : 10% ; 
 
    bottom: 10px; 
 
    line-height: 10px; 
 
    font-size: 10px; 
 
    background: gray ; 
 
}

<div id="header"> 
 
    header 
 
</div> 
 

 
<div id="footer" > 
 
    footer 
 
</div>