Question

对于桌面浏览器，所有现代浏览器都使用缩放功能，因此我们可以使用PX，但如果在移动设备上可以看到相同的网站，则px不适合放大移动浏览器。或者使用px也适用于移动浏览器。

即使我们不关心IE 6，如果我们不为移动设备制作不同的网站，我们是否应该使用em代替px，同样的网站将在桌面和手机上看到（iphone，blackberry，windows手机，歌剧迷你，机器人等？

Answer 1

您可以使用此技巧在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 2

当屏幕在现代移动浏览器上缩小时，

px将不是真正的实际像素。这些浏览器有效地模拟桌面浏览器大小像素的桌面浏览器。

因此，使用px的此类浏览器并不比普通桌面浏览器差。您可以在没有重大问题的情况下执行此操作，但在两种情况下em都适用于主体内容，如果可以的话。

Answer 3

PX是固定的像素大小 EM与字体大小相关

所以，是的，你可能应该将EM用于更多的网站。它将让用户定义他们想要的字体大小，并且您的网站可以围绕它进行缩放。

然而，大多数网络开发人员喜欢更具体的PX，因为他们可以准确地知道相对于彼此的显示方式。

但是看起来台式机和手机的分辨率差异很大，可能只会更容易重新设计您的网站以进行移动浏览。

Answer 4

我建议不要一般使用像素精度设计，特别是在开发移动设备时。原因很简单：

您正在处理屏幕范围从微小分辨率到＆gt;的设备。 1920x1080并没有“一刀切”的方法;还要考虑您的用户可能不知道他们的浏览器中甚至还存在缩放功能。
在开发移动设备时要注意，其中很少有支持多种字体大小，因此您不能依赖像素精确字体。某些移动浏览器根本不支持行高。因此，如果您的设计依赖于像素精度，例如菜单栏，并且您将条形设计为x像素高，则结果可能看起来完全错误。

Dan Cederholm的书“防弹网页设计”可能不像标题所暗示的那样具有防弹性，但它是回答问题/解决问题的良好开端。

Answer 5

像素是固定的，一个像素将在移动设备或任何显示器上使用相同的位置。 Ems是相对的，它们之所以被称为是因为它们使用大写字母“M”的近似大小。

所以，是的，您应该使用ems，因为它们会根据屏幕进行调整，而且您的字体可能更适合它们。

Answer 6

您可以阅读这篇文章http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

em vs px ...适用于移动浏览器

6 个答案: