使用带有rem = 10px的引导程序的问题

时间：2018-06-25 16:17:18

标签： css bootstrap-4

我在项目中使用Bootstrap 4。我也开始使用rem作为长度单位。我设置了rem = 10px，只是为了很容易将px转换为rem，我认为这是标准做法。但是这样做会使所有Bootstrap的默认值都不可用（即太小）。发生这种情况是因为Bootstrap已开始使用rem代替px。 因此，如果我设置了rem = 10px，由于所有元素都变得太小，最终我将手动设置每个元素（甚至是按钮）的样式。

例如：

对于.lead，font-size为1.25 rem = 12.5 px。哪个文本太小。

我只是想知道在项目中使用Bootstrap的开发人员，他们使用rem还是px作为长度单位。如果是rem，是10px还是16px？

编辑：添加图片以使其更清晰

enter image description here

我希望这不是一个愚蠢的问题。

4 个答案:

答案 0 :(得分：1)

  • 仅Bootstrap 4：我想到的一个不太好的解决方案是创建css变量并在整个过程中使用它，完全放弃rem。

    :root{ --custom-rem: 10px; }

  • 带有引导程序4的SCSS ：如果您使用的是SCSS，请编写一个将px作为输入并将其转换为rem的函数。这样，您可以摆脱rem = 16px。 @function remy($pxsize) { @return ($pxsize/16)+rem; }

    .myclass{ margin-right: remy(10);; }

PS：出于某种原因，我无法格式化代码。

答案 1 :(得分：0)

使用预构建的CSS库的缺点之一是，除非您愿意重写其代码库的某些部分，否则必须遵守它们的约定。

在这种情况下，我相信引导程序会使用标准的16px = 1rem，并且，就像您说的那样，如果要使用其他基本单位，则必须重新分配所有默认的引导程序值。

答案 2 :(得分：0)

px不是跨设备的可靠单位，因为DPI有所不同。这就是Bootstrap使用rem的原因。这不是他们第一次尝试将rem实现为通用间隔单位，但是由于缺乏旧版浏览器的支持，他们过去放弃了。看来这些不再是问题了……

引导程序3在font-size: 10px;上使用了<html>，以便设置1rem = 10px。

Bootstrap 4在移动设备上使用font-size: 16px;，在较大或更高密度的设备上使用font-size:14px。

另请参见this discussion。

答案 3 :(得分：0)

我认为真正的答案是在html中将基本rem设置为10 px，然后将bootstrap var $ font-size-base修改为1.6rem，所有这些问题都消失了

相关问题
最新问题