为什么我的 em 和 transition 设置后元素没有放大？

元素设置 em 和 transition 后不放大

一个 youtube 视频中展示了设置 em 和 transition 的元素在页面加载后会放大，但同样的代码在提问者电脑上没有达到预期效果。

可能原因：

问题在于 css 代码的位置。在视频中，css 被放置在单独的文件中并通过 link 标签引入。而提问者直接在页面中使用了 style 标签。

解决方案：

将 css 移动到单独的文件中：

<link rel="stylesheet" href="style.css">

.box {
  font-size: 10em;
  transition: 2s;
}

另外：

如果将 css 直接写在页面中，也可以通过触发样式计算来实现放大效果，例如获取元素的计算样式或设置 margin/padding/border 等属性。

以下代码示例：

<script>
  const el = document.queryselector('.box');
  getcomputedstyle(el).fontsize;
</script>

.box {
  font-size: 10em;
  transition: 2s;
}

以上就是为什么我的 em 和 transition 设置后元素没有放大？的详细内容，更多请关注其它相关文章！