如何正確工作了簡要px em與身體和html預設尺寸

我正在做一個潛在工作的編碼測試，並希望得到計算正確和想知道如果有人知道一個工具在線我可以用來轉換像素尺寸要求的基礎上的框架體的簡要及其使用HTML大小...如何正確工作了簡要px em與身體和html預設尺寸

默認使用即時通訊：

html { 
    font-size: 62.5% 
} 
body { 
    font-size: 1.5em; 
    line-height: 1.6; 
    font-weight: 400; 
    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #222 
}

我認爲使用EM的是更清潔，設置字體大小等一個更好的辦法...然後我已經提到了我需要用什麼尺寸來處理像素中的幾件東西，但不知道如何根據上面的圖像將請求PX轉換爲EM在框架中。

字體大小：

基地：16px的
小：14px的
標題：21px

因此，例如，我想創建的標題

h1 { 
    font-size: 1.8em; /* for example: but the correct em what would relate to 21px */ 
}

我發現這個有用的工具：http://pxtoem.com/ - 但是確定它會正確計算，因爲只允許你選擇body的大小，但是認爲在HTML中設置的62.5％會將設置的body尺寸調整爲62.5％正確？

來源

2017-03-16 James

這是一個有點不清楚你問....也是爲什麼其目的有集''％上'html'標記 – DaniP

要調整默認的瀏覽器設置，以便在不同的瀏覽器中呈現相同的內容？ – James

我的工作原理是：font-size 1em = 10px默認瀏覽器設置，所以我假設1.6em理論上是16px - 如果即時通訊工作出錯了讓我知道大聲笑 – James

我已經做了一些計算，併爲此解決了定義集合並將它們轉換爲任何可以幫助此答案的任何人的最佳解決方案。

CSS基地：

html { 
    font-size: 62.5%; /* 1rem = 10px on default browser settings (16px) */ 
} 
body { 
    font-size: 16px; /* setting PX unit for browsers that dont support rem below */ 
    font-size: 1.6rem; /* default to be used, browsers that dont support REM will use PX above */ 
    line-height: 1.5; 
    font-family: sans-serif; /* used current font-family used on live website */ 
    color: #283533; 
}

em單位是相對於親本，這使得配合問題的字體大小。 rem單位相對於根或html元素。這意味着我們可以在html元素上定義單個字體大小，並將所有rem單位定義爲該單位的百分比。

我在這種情況下定義了62.5％的基本字體大小，以便以類似於使用px的方式調整rems的大小。

如你會發現我已經在這個示例中定義的兩個像素和REM

字體大小：16px的; font-size：1.6rem;

但是爲什麼？那麼這是一個退而求其次的不支持REM但這種方法的任何舊版本瀏覽器，轉換是輕鬆了許多有，因爲我相信你會同意...例如工作：

8像素= 0.8 REM;
10px = 1rem;
14px = 1.4rem;
26px = 2。6rem;

希望這是任何人都希望準確地這樣大小的轉換工作的好答案

來源

2017-03-16 20:13:32 James

如何正確工作了簡要px em與身體和html預設尺寸

回答

相關問題