Fatal编程技术网
  • javascript/
  • Javascript 为什么网页会这样分裂？

Javascript 为什么网页会这样分裂？

javascript html css

Javascript 为什么网页会这样分裂？,javascript,html,css,frontend,responsive,Javascript,Html,Css,Frontend,Responsive,我对Javascript相当陌生。我曾试图制作一个摄影网站，灵感来自一个codepen项目 在我的电脑上用Google Chrome[86.0.4240.111版]浏览时，网页看起来像这样 但当我在iPad或Android手机上打开同一个网页时，它就分裂成了这个外观奇特的网站 我已经尽了最大的努力通过查看源代码来理解和修复这个问题，但是我找不到任何源代码。有人能告诉我这个源代码有什么问题吗？我如何修复它以获得像桌面版一样的响应性网页 网站： 源代码： 谢谢。CSS两款平板电脑的媒体查询768

我对Javascript相当陌生。我曾试图制作一个摄影网站，灵感来自一个codepen项目

在我的电脑上用Google Chrome[86.0.4240.111版]浏览时，网页看起来像这样

但当我在iPad或Android手机上打开同一个网页时，它就分裂成了这个外观奇特的网站

我已经尽了最大的努力通过查看源代码来理解和修复这个问题，但是我找不到任何源代码。有人能告诉我这个源代码有什么问题吗？我如何修复它以获得像桌面版一样的响应性网页

网站：

源代码：

谢谢。

CSS两款平板电脑的媒体查询768px将捕获该下的所有内容，value inclusive和500px将分别捕获

现在，您所需要做的就是在CSS中指定要针对的容器

/*片剂及以下*/

@media (max-width: 768px) {

}
/*流动的*/

@media(max-width: 500px) {

}
当我看到这个网站时，我立刻明白了你的错误

当有人开始时，安静是正常的。当您必须创建任何站点（即使是便携式设备）时，您必须始终在head部分使用以下html标记

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
</html>
我还建议您研究它是如何工作的。我附上了eveloper.mozilla文档

这很有帮助，但没有必要，也不必详细说明。感谢Gianfrancesco的反馈，我将在下一个答案中缩短答案！非常感谢你。它确实帮助我解决了这个问题。