2016-04-28 12 views
1

Ich habe eine Marge, die 20px sein sollte. Wie konvertiere ich das zu ems? Die Schriftgröße für das Element ist 1.08em. 1 em = 13px.Konvertieren von Pixeln in Ems für Ränder und Polsterung

Ich dachte, 30 durch 13 zu teilen würde funktionieren, aber das scheint nicht zu sein.

Hier ist die CSS:

.test { 
    margin-bottom: 30px; 
    font-size: 1.23em; 
} 

ich die 30px zu ems konvertieren müssen.

+0

Sie wollen eine Marge von 20px, und deshalb teilen Sie 30 durch 13? Warum 30? Übrigens würde es helfen, wenn Sie den zugehörigen Code (CSS + HTML) tatsächlich veröffentlichen würden. – trincot

Antwort

0

Ich denke, du bist auf dem richtigen Weg. Ems werden berechnet, indem Sie Ihren em-Wert mit der ererbten Schriftgröße des aktuellen Elements multiplizieren. Wenn ich richtig verstehe, ist die Schriftgröße des Elements gerade 14.04px, oder? (13px X 1,08).

Mit der gleichen Logik würden Sie 20px (Ihre Zielmarge) durch die Basisschriftgröße (13px) teilen, was Ihnen 1.538 ergibt ... Sie können bis 1.54em runden und Sie erhalten 20.02px.

Funktioniert das?

1

Stellen Sie Körper, HTML-Schriftgröße auf 62,5% und dann 16px = 1em. In diesem Verhältnis wird es einfach, mit der Mathematik zu arbeiten.

Hier ist eine Erklärung warum. Css 62.5% why do developers use it?

1

Ich habe eine goldene Regel, was ich in den meisten meiner Projekte verwende, ist es ganz einfach und einfach.

Die meisten Browser haben 16px nach Standard, also definiere ich meinen Körper und HTML 100%, so dass die Berechnung einfach sein kann.

Beispiel:

//Golden Rule: 
    //100% = 16px browsers default 
    //21px ÷ 16px = 1.5em 


html, 
body { 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
    color:#565a5c; 
    font: normal normal 100%/1.5em "MyriadPro", "FontAwesome"; 
    padding-top: 50px; 
    padding-bottom: 20px; 

} 

mehr Beispiel:

h1 { 
    font-size: 2em; /* 32px ÷ 16px */ 
    line-height: 1.3125em; /* 42px ÷ 32px */ 
    margin-bottom: .5em; /* 16px ÷ 32px */ 
} 

h2 { 
    font-weight: 400; 
    font-size: 1.75em; /* 28px ÷ 16px */ 
    line-height: 1.285714286em; /* 36px ÷ 28px */ 
    color: $hc; 
    margin-bottom: .785714286em; /* 22px ÷ 28px */ 
} 

30px wird = 1.875em

Ich hoffe, das Ihnen geholfen.