字體大小和設備的像素比

比方說，我有默認字體大小設置爲16像素（這應該是多餘的，因爲它在大多數瀏覽器默認設置）：字體大小和設備的像素比

爲了簡便起見，我的網站包含有一些大小盒10em x 10em。

 
body, html 
{ 
    font-size: 16px; 
} 
.box { 
    border: 1px green solid; 
    background-color:green; 
    width:10em; 
    height:10em; 
}

我的網站已經響應與在em值（36，62和85em）針對性的具體斷點min-width媒體查詢。

我的網站做的唯一的事情就是改變寬度和盒子的顏色。

 
@media (min-width:36em) { 
    .box { 
    width: 36em; 
    border:1px red solid; 
    background-color:red; 
    } 
} 
@media (min-width:62em) { 
    .box { 
     width: 62em; 
     border:1px blue solid; 
     background-color:blue; 
    } 
} 
@media (min-width:85em) { 
    .box { 
     width: 85em; 
     border:1px orange solid; 
     background-color:orange; 
    } 
}

現在，讓我們說，我有1440分辨率的一些件，其中，瀏覽器決定了設備的像素密度是默認2dppx。結果，一切看起來都比它應該大得多。我不喜歡它。

但解決方案應該是容易的，對不對？只需在開始時添加媒體查詢以獲得2dppx的像素密度，並且由於它是像素的兩倍，所以我只是將字體縮小了一半......應該可行，對吧？

而且因爲我使用「EM」上的一切，然後通過改變字體大小的一半我會自動降低所有的大小「EM」一半尺度的，對吧？

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

relevant jsFiddle

好吧，我發現，我認爲這將...我想谷歌的答案，但沒有發現任何相關的，我懷疑我誤會它不工作怎麼字體大小，EMS和像素密度的作品...

減少字體大小50％減少字體大小的一半以上。原始大小是16px，但字體大小：50％;導致比font-size：8px小得多的字體...在Firefox和Chrome中測試。有誰知道這是爲什麼？
當我設置字體大小：8像素;在爲最小寬度2dppx然後媒體查詢媒體查詢：36em，62em和85em不會觸發，因爲我本來期望，至少當我改變layout.css.devPixelsPerPx在Firefox。媒體查詢中的最小寬度的行爲就像字體大小仍然在16px，儘管它隨dppx媒體查詢而改變。經過Firefox和Chrome測試。有誰知道這是爲什麼？

UPDATE

看起來像媒體查詢在1dppx背景下加載，如果你使用「EM」沒關係，看來他們是在負載和值緩存如最小寬度固定到第一個值並且儘管您在不同的媒體查詢中更改了基本字體大小，但其他查詢不會刷新。

我現在能想到的唯一的辦法是乘所有媒體查詢。一個媒體查詢1個dppx上下文中的px值，另一個媒體查詢查找2個dppx上下文中的px值（這是第一個值的50％）。

來源

2017-08-25 Mirek

爲什麼你認爲'字體大小：由於我使用「EM」的大小和SASS，我可以簡單地用這個混入（例如與2dppx）替換所有@media查詢50％'是'一半字體大小：16px'？它是_parent字體大小_的一半。 –

無論如何，減小字體大小在更高的dppxs不是一個好主意。這些屏幕具有更高的dppxs，因爲硬件點更小。如果您在2dppx屏幕上將字體大小設置爲16個硬件點，則其大小與標準（96dpi）顯示器上的8個像素相同，這實際上很小。（無論如何，這是我們的老傢伙。） –

父母顯式設置爲16px（body，html），所以50％應該等於8px。我打算只爲特定的分辨率縮小尺寸，以針對無緣無故使用更高像素密度的設備，並且生成的頁面更大。我不知道如何解決這個問題，除了針對具體的密度和特定的分辨率之外，還有其他任何方法。 – Mirek

由於李斯特先生的評論，我發現這一點：

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

...是不是我打算這樣做。50％規則適用於標記的<html>標記AND。生成的字體大小不是8px，而是4px，因爲HTML中的50％是8px，嵌套body標籤中的另一個50％的結果是4px。

我打算做的是：

 
@media (min-resolution: 2dppx) { 
    html { 
     font-size: 50%; 
    } 
}

字體大小的問題就解決了。

對於媒體查詢：我發現@media查詢中的大小忽略了像素密度，但CSS規則體中的大小卻沒有。

 
@mixin media-min-width($min-width) { 
    @media(min-width:$min-width), (min-width: $min-width/2) and (min-resolution: 2dppx) { 
     @content; 
    } 
}

來源

2017-08-29 09:43:44 Mirek

字體大小和設備的像素比

回答

相關問題