JSFiddle - React, Tailwind, and code Playground

by Chih-Hsuan Fan

HTML

<div class="box"></div>

<p class="js-log"></p>

CSS

html {
  /* font-size: 62.5%; */
  font-size: 10px;
}

.box {
  /* 目標尺寸是 100x100 */
  width: 10rem;
  height: 10rem;
  
  /* 目標 padding 是 10px */
  padding: 1rem;
  
  /* 目標字體大小是 14px */
  font-size: 1.4rem;
  
  box-sizing: border-box;
  border: 1px solid black;
}

.js-log {
  font-size: 16px;
  line-height: 1.3;
}

JavaScript

const htmlStyle = window.getComputedStyle(document.documentElement);

const $box = document.querySelector('.box');
const boxStyle = window.getComputedStyle($box);
const rect = $box.getBoundingClientRect();

document.querySelector('.js-log').innerHTML =
	`&lt;html&gt; 字體大小: ${htmlStyle.fontSize}<br /><br />寬: ${rect.width}px, 高: ${rect.height}px<br />padding: ${boxStyle.paddingTop}<br />字體大小: ${boxStyle.fontSize}`;