0

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

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

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

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

4

1 回答 1

0

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

于 2019-10-14T14:47:55.537 回答