嗨,我在响应式设计方面遇到了问题,因为它在浏览器中工作,当我将浏览器大小更改为小网站时,它会发生变化,但当我使用移动设备或检查元素工具访问网站时,它不会改变。这是网站演示:https://horrorfiles.htw.pl 我正在使用 Tailwind CSS 和 React JS,我用它做了很多项目,这是我的第一个案例。
我想您需要阅读适当的文档,然后应用通常的断点来提高响应能力,这里是断点文档,并且您网站上的一切看起来都很好。
我认为问题是您使用断点前缀来定位移动设备,而不是针对移动设备进行设计,然后使用断点来定位更大的屏幕。 Tailwind 的文档有这样的:https://tailwindcss.com/docs/responsive-design。
如果你错过了这一行 - 那么什么都不起作用
<meta name="viewport" content="width=device-width, initial-scale=1.0">
将其添加到您的标签中,然后响应式类就会生效,当然您的类需要正确。
tailwind 是移动优先的 css,因此您的无前缀类将影响移动设备,对于大屏幕,您可以根据您的要求使用 sm、md、lg