使用 Preact 时媒体查询没有反映

Posted 2023-03-06

【中文标题】使用 Preact 时媒体查询没有反映

【英文标题】：Media queries are not reflecting while using Preact

【发布时间】：2021-09-24 17:17:12

【问题描述】：

我正在尝试在反应中使用我现有应用程序的 Preact

@media only screen and (min-width: 320px) and (max-width: 768px) 
    
      .card 
         margin-top: 12px;
     
      .card-body 
          padding: 12px;
       
  

但 CSS 并没有反映在 Preact 中，它采用了网站样式的默认样式。

没有找到具体的文件。

请告诉我它是如何工作的。

提前致谢。

【问题讨论】：

你能提供一个复制品吗？ CSS 就是 CSS，你使用的任何 JS UI 库都与它无关。

【参考方案1】：

这可能是关于 preact-cli 的问题，而不是 Preact 本身。

如果是这样，我猜 CSS 文件被视为 CSS 模块，它将作为任何类名的前缀（并且需要在您的源代码中反映这一点）。作为一种解决方法，请尝试：

:global 
  @media only screen and (min-width: 320px) and (max-width: 768px) 
  
    .card 
      margin-top: 12px;
    
    .card-body 
      padding: 12px;