em vs px ...移動瀏覽器

Question

對於桌面瀏覽器，所有現代瀏覽器都使用縮放功能，所以我們可以使用PX，但如果在手機上可以看到相同的站點，那麼px不適合放大移動瀏覽器。或使用px也適用於移動瀏覽器。

即使我們不關心IE 6，我們是否應該用em代替px，如果我們沒有爲手機制作不同的網站，同一網站會在桌面和手機上出現（iphone，黑莓，的Windows Mobile，Opera Mini的，機器人等？

Answer 1

px當屏幕在現代移動瀏覽器上縮小時不會成爲真正的實際像素。這些瀏覽器正在模擬桌面瀏覽器大小的像素的桌面瀏覽器。

因此，對於使用px的這種類型的瀏覽器來說，並不比普通桌面瀏覽器差。如果您希望沒有重大問題，則可以這樣做，但在這兩種情況下，如果可以，em適用於主體內容。

Answer 2

PX是固定的像素大小 EM是相對於字體大小

所以真的，是你應該使用EM了很多網站。它可以讓一個用戶定義他們想要的字體大小，並且你的網站可以縮放它。

但是，大多數web開發人員喜歡更具體的PX，因爲他們可以確切地知道如何顯示相對於彼此的事物。

但是看起來臺式機和手機的分辨率差別很大，它可能會更容易重新設計您的網站以進行移動瀏覽。

Answer 3

像素是固定的，一個像素將在移動設備或任何顯示器上使用相同的位置。 Ems是相對的，它們被稱爲是因爲它們使用大寫字母'M'的近似大小。

所以，是的，你應該使用ems，因爲它們將根據屏幕進行調整，並且你的字體可能更適合他們。

Answer 4

我建議不要普遍使用像素精度設計，特別是在爲移動設備開發時。原因很簡單：

• 您正在處理的屏幕範圍從微小分辨率到> 1920x1080，並且沒有「一刀切」的方法;還要考慮到用戶可能不知道其瀏覽器中甚至存在縮放功能。
• 在爲移動設備開發時，請注意它們中很多不支持多種字體大小，因此您不能依賴像素精確的字體。一些移動瀏覽器完全不支持行高。因此，如果您的設計依賴於像素精度（例如菜單欄），並且將條設計爲x像素高，則結果可能看起來完全錯誤。

丹Cederholm的書「防彈網頁設計」可能不像標題所示的那樣具有防彈性，但它是回答您的問題/解決您的問題的一個非常好的開始。

Answer 5

您可以使用這一招在你的CSS從PX轉換字體到EM：

body { 
    font-size: 62.5%; /* resets the page font size */ 
} 

然後指定你這樣的字體大小：

p { 
    font-size: 0.8em; /* equals 8px */ 
    font-size: 1.0em; /* equals 10px */ 
    font-size: 1.6em; /* equals 16px */ 
    font-size: 2.0em; /* equals 20px */ 
} 

等。然後，您可以在PXtoEm.com將px轉換爲em。

Answer 6

你可以閱讀這篇文章http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/