这个网站的 CSS 在我的计算机上运行得很好,就像在桌面版本和媒体查询制作的移动版本中一样,但是当我在移动设备上查看它时,CSS 就停止工作了。网站链接:https://lightheart-basbousa-3c2db6.netlify.app/,repo链接https://github.com/hetyug04/portfolioV7。它托管在 netlify 上,但我以前没有遇到过问题。这是我手机上的移动视图
您的 CSS 正在较小的屏幕尺寸上运行。
使用浏览器的开发工具,我可以看到您在介绍类上有一个带有 display: none 的媒体查询。这会影响小于或等于 1015 像素的屏幕。如果您更改或删除媒体查询,您的输出将会更改。
display: none
不确定它为何存在,以及删除是否能完全解决您的问题,但检查这应该是您的第一步。
还有一些其他问题,例如溢出和宽度不正确,也许您想查看移动优先设计方法。
我解决了这个问题,显然这是因为我将 CSS 样式嵌套在样式表中,一旦我取消嵌套样式,CSS 就开始适用于移动浏览器
您的 CSS 正在较小的屏幕尺寸上运行。
使用浏览器的开发工具,我可以看到您在介绍类上有一个带有
display: none
的媒体查询。这会影响小于或等于 1015 像素的屏幕。如果您更改或删除媒体查询,您的输出将会更改。不确定它为何存在,以及删除是否能完全解决您的问题,但检查这应该是您的第一步。
还有一些其他问题,例如溢出和宽度不正确,也许您想查看移动优先设计方法。
我解决了这个问题,显然这是因为我将 CSS 样式嵌套在样式表中,一旦我取消嵌套样式,CSS 就开始适用于移动浏览器