响应式设计不起作用

问题描述 投票:0回答:3

嗨,我在响应式设计方面遇到了问题,因为它在浏览器中工作,当我将浏览器大小更改为小网站时,它会发生变化,但当我使用移动设备或检查元素工具访问网站时,它不会改变。这是网站演示:https://horrorfiles.htw.pl 我正在使用 Tailwind CSS 和 React JS,我用它做了很多项目,这是我的第一个案例。

html css reactjs responsive-design tailwind-css
3个回答
2
投票

我想您需要阅读适当的文档,然后应用通常的断点来提高响应能力,这里是断点文档,并且您网站上的一切看起来都很好。

在此输入链接描述


0
投票

我认为问题是您使用断点前缀来定位移动设备,而不是针对移动设备进行设计,然后使用断点来定位更大的屏幕。 Tailwind 的文档有这样的:https://tailwindcss.com/docs/responsive-design


0
投票

如果你错过了这一行 - 那么什么都不起作用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

将其添加到您的标签中,然后响应式类就会生效,当然您的类需要正确。

tailwind 是移动优先的 css,因此您的无前缀类将影响移动设备,对于大屏幕,您可以根据您的要求使用 sm、md、lg

© www.soinside.com 2019 - 2024. All rights reserved.