2011-08-30 98 views
3

我正在使用em,但在嵌套項目中遇到問題,所以我決定使用%作爲yui建議。如何將px轉換爲%,就像我們將px轉換爲em以獲取字體大小一樣?

要更改字體的大小,總是使用百分比作爲單位 ,因爲他們提供更持續高於EMS,因爲它們允許 用戶發起的調整(不像像素)。

如何將px轉換爲%?這樣是對Px的EM http://pxtoem.com/

編輯

我發現這個例子非常好,但它只是直到24px的。

http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html

如何px計算大小%每個大小。作爲一個例子情況下,根據這個表會是怎樣大小%45px

+1

您應該解決與'em'的,而不是強迫百分比的問題做一些他們不適合。 – progo

+0

@progo - 你說得對'em'很容易用'62.5%'技術來計算。但問題就來了嵌套元素和'62.5%'使默認字體大小爲'10px'這是小讀 –

回答

0

百分比是流體佈局,它總是會依賴於瀏覽器的實際大小,它會在調整大小的改變,而固定佈局無論瀏覽器大小如何,都不會改變。

換句話說,你正在嘗試做什麼,你需要假設這是永遠不對的。

例如,你可以認爲100%是1,024像素,但我的屏幕上,那將是1920px ...

+3

我認爲他是在談論的字體大小,在這種情況下,你就錯了。字體大小的百分比基於最接近的具有設置值的父字體大小,並且與瀏覽器窗口大小無關。 – mekwall

+0

然後應該很容易,因爲100%是1em是正確的? – balexandre

+0

一如往常處理百分比,它歸結爲基數。 – mekwall

0

所有主要的瀏覽器與像素的內部工作,因此會做計算你。您可以通過使用JavaScript獲取font-size(在我使用jQuery的情況下)來輕鬆獲取字體的像素大小。

test case on jsFiddle

編輯:我需要更多的咖啡,只是看了一遍這個問題,並意識到你需要的對面。

爲了得到的oppsite,你可以不喜歡在this test case

但是,你必須知道的基本像素進行比較的。在上述測試案例中,我得到了父代font-sizebody元素的百分比。

+1

我知道這種感覺。雖然我的問題通常是我不能閱讀。 – Joonas

+0

@Lollero哈哈,我盡我所能做了相反的事情,我認爲結果很好! – mekwall

10

已經有2個答案了,但是,他們不正確。每個接受百分比長度的CSS屬性都定義瞭如何計算這些值。在font-size的條款,這是CSS 2.1說:

率:是指繼承字體大小

它永遠不會依賴於窗口大小左右。

如何像素轉換成百分比:在大多數情況下,16pxfont-size的默認值 - 這是100%。因而45px將100%*×45像素/ 16像素= 281.25%

+0

+1感謝 - 他們是否使用相同的方法在這裏http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html他們使用'體{ \t字體:13像素/ 1.231宋體,黑體,清潔,SANS -serif; \t * font-size:small;/* IE */ \t * font:x-small;/*用於IE在怪異模式*/ }' –

+0

與錯誤的假設會產生一個錯誤的結果開始。 –

1

PX如何轉換成%?

你不行。百分比是父元素的字體大小的比例,並最終(當你到了<html>元素)回落到用戶的偏好(這是一個未知值)。像素大小是以像素爲單位的大小(其可以根據DPI而變化)。

這樣是Px的到EM http://pxtoem.com/

這使得對用戶的默認字體大小是什麼假設。這個假設通常是錯誤的。

如果你想同樣的假設,然後1em是一樣的100%(和0.75em是一樣的75%等)。

你甚至都不需要自己動手轉換...... 表您鏈接到包含百分比值!

+0

但那只有26px –

+0

這只是基本的乘法。 – Quentin

0

我用螢火此一次。我曾經把百分比放在字體大小,並在「計算」選項卡中檢查。如果它與實際文檔中的相同,那麼我就知道我需要這個百分比值。經過幾次轉換之後,您知道文檔中的百分比適合什麼樣的px。不是很簡單,但也不難。

-1

把html和body標籤在100%。然後使用百分比設置每個尺寸。這將是相對於這些標籤,然後你得到一個完美的流體佈局。

-1

用於轉換PX到%簡易表現公式是TCRŤ ARGET%Ç ontext = ř esult * 100

該公式適用於兩個字體像素%和固定內容框百分比框

如果您的字體大小是45px(目標),並且內容值是讓我們將字體16(內容)的默認值和您的結果是2.81並乘以100,您將獲得281.25 ,你的價值爲281%。

+0

目標/背景=結果不是目標語境%=結果 –

-1

例:尋找一個200像素的div的百分比寬度1000像素容器內:

1000分之200= 0.2 =>動過兩到正確的小數位,這讓你有20%的寬度。

練習2:轉換左和div來百分比,其中填充是10px的,元件寬度的右填充是350像素並且一切是1000像素容器的內部。這裏我們忽略了整個容器,因爲我們正在處理填充,使我們的上下文爲350px,目標爲10px。然後,我們的左右填充將是:

三百五十零分之十= 0。02857142857142857(保持整個小數,以確保一切都是完美的數學)=>移動小數點在兩到讓你有2.857142857142857%左右填充的權利。

+1

這是什麼都與字體大小呢? – Quentin

相關問題