19

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

即使我们不关心 IE 6 ，如果我们不为移动设备制作不同的站点，我们是否应该使用 em 代替 px ，相同的站点将在桌面和手机（iphone、blackberry、windows mobile、opera）上看到迷你，安卓等？

4

5 回答 5

38

您可以使用此技巧在 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 用于您的布局。

于 2011-05-12T23:22:58.650 回答
6

px在现代移动浏览器上缩小屏幕时，它不会是真正的实际像素。这些浏览器有效地模拟了具有桌面浏览器大小像素的桌面浏览器。

因此，对于这种类型的浏览器，使用px起来并不比普通桌面浏览器差。如果您愿意，您可以在没有重大问题的情况下这样做，但如果可以的话，在这两种情况下em都更适合主体内容。

于 2010-03-25T14:06:56.413 回答
5

PX 是固定的像素大小 EM 是相对于字体大小的

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

然而，大多数网络开发者喜欢更具体的 PX，因为他们可以准确地知道事物是如何相对于彼此显示的。

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

于 2010-03-25T13:52:57.700 回答
4

我建议不要普遍使用像素精度设计，尤其是在为移动设备开发时。原因很简单：

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

Dan Cederholm 的书“防弹网页设计”可能不像标题所暗示的那样防弹，但它是回答您的问题/解决您的问题的一个非常好的开始。

于 2010-05-19T22:00:28.250 回答
1

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

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

于 2010-03-25T14:00:46.310 回答