我正在使用Sapper创建一个Web应用程序,并希望使用相对字体大小。
我已经在body
元素上为不同的媒体查询设置了固定的字体大小。然后,我想在Svelte组件的后续文本元素中使用rem
单位来调整font-size
以适应视口。
HTML(Svelte组件)
<h1>Title</h1>
Svelte 组件中的 CSS
h1 {
font-size: 2rem;
}
Sapper的全局CSS
body {
font-size: 12 px;
}
@media (min-width: 600px ) {
body {
font-size: 15px;
}
}
我希望本地组件CSS能够读取全局 body
元素上的字体大小,并因此调整 h1
中的字体大小以适应视口大小。然而,没有任何动作。相比之下,使用 em
单位可以正常工作。
html
而不是body
,这就是 bug。当我将其包含在 Sapper 的global.css
中时,它实际上可以正常工作,而无需使用:global
。谢谢! - Matthias Stahl