Em / Rem与Px困境

时间:2013-03-02 18:03:32

标签: css pixel font-size em

我一直在使用我长期工作的所有网站的所有维度的像素(在这里和那里只有几个百分比)。

我不断地看到有关em和rem的东西,并继续讨论是否使用像素。

根据我的阅读,使用它们的最佳方法是在<html>元素上将字体大小设置为62.5%,使1em等于10像素,然后指定与之相关的字体大小。

我希望这里的人能为我回答一些想法:

  • 如果您使用em / rem并且您正在构建自己的网站并且您认为,此文本需要为20px并且您将其转换为2em,那么为什么不首先使用像素?

    < / LI>
  • 如果您使用em作为尺寸,并且想要添加图像背景尺寸并且它具有一组像素尺寸,那么您可以在em中设置它并且用户缩放,这不会破坏布局吗?

我已经读过使用em允许你在一个地方改变整个应用程序的相对字体大小(这是个好主意并且可能非常有用)但是如果你改变了html标签上的62.5%, 1em将不再等于10px,因此您之前设置的简易性完全不在窗口之内。

假设您有一个<div>,并且您将其背景图像设置为您之前在特定维度创建的图像,并且左侧需要特定的填充,您可以使用所有适当的尺寸进行设置和填充都很好地设置在em的,然后有人放大肯定会打破你的盒子尺寸和精心制作的左边填充全部完全出窗口。

我也看过这个混音:

// font-size must be set to 62.5% on html
=font-size($size: 1.6, $line-height: $size * 1.25)
  font-size: ($size * 10) + px
  line-height: ($line-height * 10) + px
  font-size: $size + rem
  line-height: $line-height + rem

当然,如果有人放大使用像素版本的浏览器,并将其与放大rem版本的人进行比较,结果会有所不同。 ????

我希望你们能澄清一些事情。在发布之前我已经阅读了大量关于这一切的内容所以我猜你会发布很多链接,说明去看看。我已经按照上面的说明阅读了它们,并且此后仍然有上述问题。

0 个答案:

没有答案