在 CSS 中使用根元素和 rem 缩放字体答案

【问题标题】：font-scaling with root element and rem in CSS在 CSS 中使用根元素和 rem 缩放字体
【发布时间】：2020-02-11 01:13:39
【问题描述】：

我使用<html> 标记来定义全局字体大小并使用rem 来缩放字体。因为我正在构建一个将包含在许多其他应用程序中的 Web 组件。因此，在<html> 标签上定义字体大小会破坏消费者的字体大小。那么如何解决这个问题。

是否有可能 REM 计算字体大小不是从 HTML 标记作为根元素，而是我的 web-component 的根？

我不想在<html> 标记上定义基本字体大小，而是在网络组件上定义...任何其他解决方法也可以。

function getDeviceName(width) {
  let deviceType = 'Mobile';
  if(window.screen.width < 768) {
    deviceType = 'Mobile';
  } else if(width >= 768 && width < 1201) {
    deviceType = 'Tablet';
  } else if(width >= 1201) {
    deviceType = 'Desktop';
  } 
  return deviceType;
}

function detectDeviceWidth(row, width) {
  const { fontSize, lineHeight } = window.getComputedStyle(row);
  row.innerText = `${getDeviceName(width)} - ${fontSize}/${lineHeight}`;
}

function triggerMediaQueries() {
  const rows = document.querySelectorAll('.row');
  Array.from(rows).forEach(detectDeviceWidth);
}

window.addEventListener('load', triggerMediaQueries);

var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    const rows = document.querySelectorAll('.row');
    Array.from(rows).forEach(row => detectDeviceWidth(row, cr.width));
  }
});

// Observe one or multiple elements
ro.observe(document.body);

html {
  font-size: 100%;
  line-height: 24px;
}

@media (min-width: 48rem) {
  html {
    font-size: 112.5%;
    line-height: 27px;
  }
}
@media (min-width: 75.0625rem) {
  html {
    font-size: 137.5%;
    line-height: 33px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  padding: 5px;
  width: 100%;
  background: #fff;
  background: #ccc;
}

@media (min-width: 48rem) {
  .container {
    padding: 100px;
  }
}
.row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: #fff;
  height: 100px;
  color: #666666;
  position: relative;
  border: none;
}

.font100 {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font200 {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font300 {
  font-size: 1rem;
  line-height: 1.5rem;
}

.font400 {
  font-size: 1.1875rem;
  line-height: 1.75rem;
}

.font500 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font600 {
  font-size: 1.75rem;
  line-height: 2.25rem;
}

.font700 {
  font-size: 2.3125rem;
  line-height: 3rem;
}

@media (min-width: 48rem) {
  .row {
    border: 3px solid green;
  }
}
@media (min-width: 75.0625rem) {
  .row {
    border: 3px solid blue;
  }
}

<div class="container">
  <h3>Font value 100</h3>
  <div class="font100 row"></div>
  <h3>Font value 200</h3>
  <div class="font200 row"></div>
  <h3>Font value 300</h3>
  <div class="font300 row"></div>
  <h3>Font value 400</h3>
  <div class="font400 row"></div>
  <h3>Font value 500</h3>
  <div class="font500 row"></div>
  <h3>Font value 600</h3>
  <div class="font600 row"></div>
  <h3>Font value 700</h3>
  <div class="font700 row"></div>
</div>

这是我的字体缩放规则

html {
  font-size: 100%;
  line-height: 24px;
}

@media (min-width: 48rem) {
  html {
    font-size: 112.5%;
    line-height: 27px;
  }
}
@media (min-width: 75.0625rem) {
  html {
    font-size: 137.5%;
    line-height: 33px;
  }
}

https://codepen.io/rajkeshwar-the-bold/pen/PMwRGe

【问题讨论】：

改用em？ em 是父元素的字体大小。因此，如果没有任何祖先设置其字体大小，那么它将相对于 web 组件容器（如果已设置）。 Have a read of this article
大部分元素都有自己的font-size。因为em 总是从它的具有font-size 集的父元素计算font-size。因此，对于大多数元素来说，这将是重大的代码更改。我想知道有没有办法让rem 以web-component root 作为根元素而不是html 标签。
在这种情况下 no - rem 取自基本字体大小 - 这就是它的定义方式和工作方式
你想太多了。 rem 表示相对于文档字体大小。文档字体大小是1em 的大小，适用于根元素 -- html。事实上，font-size: 1em 和 font-size: 1rem 在为根元素指定时，是等价的。如果您不想覆盖文档字体 - 因为您的组件将被重用于您自己的其他文档 - 然后不要在根元素上指定它。如果您需要调整相对大小，请在组件的后代元素上使用 em 单位。如果您绝对想要基线大小，请使用 CSS 变量。
@RajkeshwarPrasad 据我了解，您希望 Web 组件中的 CSS 规则使用根元素（组件的）字体大小作为“rem 值”。你不能通过简单地在 web 组件根元素上设置一个固定的像素大小并使用 em 继承来实现这一点吗？（但要清楚一点，我目前没有在您的代码中看到任何 Web 组件的使用）

标签： html css font-size font-scaling

【解决方案1】：

只需使用em。 em 相对于父元素，而rem 相对于根元素。如果您将em 应用于根元素，则它等效于rem。

【讨论】：