масштабирование шрифтов с корневым элементом и rem в CSS - PullRequest
Новая
       36

масштабирование шрифтов с корневым элементом и rem в CSS

0 голосов
/ 14 октября 2019

Я использую тег html для определения глобального размера шрифта и rem для масштабирования шрифта. Поскольку я создаю web-component, это будет включено во многие другие приложения. Следовательно, определение размера шрифта для тега html нарушит размер шрифта для потребителей. Так как решить эту проблему.

Вопрос : Существуют ли возможности REM для расчета размера шрифта не из тега HTML как корневого элемента, а из корня моего web-component?

Пожалуйста, найдите маленькийНапример, здесь мое масштабирование шрифта, но я хочу определить размер базового шрифта не для тега html, а для веб-компонента или любого другого обходного пути, также будет хорошо.

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

**


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;
  }
}

1 Ответ

0 голосов
/ 14 октября 2019

просто используйте em. em относительно родительского элемента, тогда как rem относительно корневого элемента. в случае применения em к корневому элементу это будет эквивалентно rem.

...