CSS中的像素與像素密度

我對HTML和CSS非常陌生，當我決定某件事是5px時，由於像素的物理尺寸依賴於密度，所以在100 ppi的屏幕上肯定是5px看起來會比300 ppi的屏幕更大。CSS中的像素與像素密度

這是正確的，如果有的話是否有任何方式來調解呢？

2013-03-28 Sebiddychef

你爲什麼需要首先「調解」這一點？也許你可能想使用'em'和'％'？ – unor

絕對！通常在桌面上，1個CSS像素= 1個像素。移動設備（特別是較新的高分辨率顯示器）已經給我們帶來了一些麻煩。這裏是我最喜歡的解決方法：

(function() { 
    var meta = document.createElement("meta"); 
    meta.setAttribute('name','viewport'); 
    var content = 'initial-scale='; 
    content += 1/window.devicePixelRatio; 
    content += ',user-scalable=no'; 
    meta.setAttribute('content', content); 
    document.getElementsByTagName('head')[0].appendChild(meta); 
})();

我通常添加爲我的身體標記的第一個孩子，但它可能應該是在頭標記。該腳本根據顯示器的像素密度修改設備的比例尺，並強制1個CSS像素等於1個像素。

享受！

來源

2013-03-28 16:48:42

謝謝 - 我確定它可行，但說實話在我的舞臺上並不意味着太多！另一種方式只是使用毫米，釐米等或％的？ – Sebiddychef

你可以隨時使用em。我發現這是一個有用的單位，可以解釋不同的分辨率和用戶偏好。好的經驗法則是1em = 16px（或1em = 16pt）。我製作了很多使用em的網站和移動網站/應用程序來確定div的大小，字體等。 –

像素和CSS的％。諸如英寸和釐米等指標適用於可打印文檔。 – snaplemouton

-1

您還可以使用@media查詢，它允許你使用不同的css針對不同屏幕尺寸：

您可以瞭解更多CSS Tricks

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
    body { 
    background: #ccc; 
    } 
}

另一個屏幕尺寸

@media all and (max-width: 1000px) and (min-width: 700px) { 
    #sidebar ul li a:before { 
    content: "Email: "; 
    font-style: italic; 
    color: #666; 
    } 
}

來源

2013-03-28 16:51:17

CSS中的像素與像素密度

回答

相關問題