我为一家名为 Monse's Crochet Creations 的钩针编织企业创建了一个登陆页面,可以在此处
找到我正在用replit编码。我在我的项目中使用 next.js 和 tailwind css。
最终通过 Firebase 部署我的网站后,我认为一切都很好,因为我的网站在我的桌面上看起来与预期一致。但后来我尝试在手机上打开该网站,令我惊讶的是,该网站一团糟。我缺少轮播标签的文本。我的轮播背景是黑色的。我的 3 个平铺网格产品也有黑色背景。
我的控制台中没有收到任何错误。当我使用桌面上的开发工具查看网站的移动视图时,它看起来也很好。
我不确定是什么原因导致了这个问题。我是一个相当新的开发人员,所以我真的需要一些建议。
我尝试使用各种移动设备和移动模拟器导航到该网站。我还尝试摆弄顺风类和全局 CSS 声明。我什至在我的 iPad 上尝试过,它也缺少背景颜色。
我已经解决了我自己的问题。
该错误是由寻找用户明/暗设置的 CSS 片段引起的。如果用户启用了“深色”,则某些元素的背景将更改为黑色,文本将更改为白色。由于这是无意的,因此颜色与其他元素发生冲突。
这是在我的 global.css 文件中声明的代码片段。
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}