html {
font-size: 62.5%;
}
@media (min-width: 480px) {
html {
font-size: 10px;
}
}
在root文件中,i覆盖页面的默认值font-size
示例:
62.5%
是48px,是正确的。
但是,当涉及到
10px
部分时,它根据初始默认值
font-size
值计算值。表示屏幕断点
rem
应为
10 * 48 = 480px,但它是
16 * 48 =768px.TailWind识别我使用的自定义断点,但是它基于错误的计算它们的像素
class
html
class="flex size-[4.8rem]"
这对我来说不是问题,但对于其他开发人员来说,这不是很难理解正在发生的事情,这根本不是直观的。
我尝试了什么
我尝试定义基础
screens
在
tailwind.config.js
中,它不起作用在媒体查询中删除了
font-size
16px
中看到。这些没有帮助。 versions 角14 tailwind3.4.17
POSTCSS8.5.1
xs: "48rem"