0

该网站可以在桌面上运行并且看起来很完美，即使在缩放浏览器时一切正常。当我在移动设备上加载它时，它看起来完全关闭，只有一些 css 加载，让它变得更奇怪，它有时工作，有时不工作。我检查了 head 部分的所有标签，以确保响应式代码正常工作，并且全部正确。我不知道可能出了什么问题。这是网站http://flits.live/的链接，谢谢！

4

3 回答 3

0

我会实施引导程序。我已经为你清理了 HTML。

https://jsfiddle.net/w8crtf2p/

自己清理代码后，将以下代码添加到您的head代码中。如果需要，您可以删除可选主题。

然后通过引导程序查看您的网站所需的内容。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
于 2016-04-07T08:52:43.883 回答
0

您在这里有许多媒体查询特定 CSS 的实例。

以你的课.phone-screen为例，

    @media (max-width: 991px) and (min-width: 768px)
    .phone_screen {
        width: 240px;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }

这里的 width 元素指定只有当窗口在 768px-991px 范围内时，才会对phone-screen类应用 240px 的宽度。

唯一在技术上不会加载并实现到输出的 CSS 将在错误的媒体查询中。如果窗口宽度小于 768px（Bootstrap 的标准“xs”断点）或大于 991px（Bootstrap 的标准“md”断点），则不会“加载”此代码。

（有关 Bootstrap 断点的更多信息：http: //getbootstrap.com/css/#grid-options）。

该网站的结构很差，我强烈建议实际实施引导程序，可在http://getbootstrap.com/找到，这将真正帮助您了解需要如何构建响应性。您不能只是将 div 放在一起并假设事情不会在较小的窗口中开始消失（实际上，由于上​​述媒体查询，在您的情况下会“离屏”）。

于 2016-04-07T04:21:22.823 回答
0

对于移动最大宽度是 767 而不是 768 好的，所以考虑一下这个东西。您为 ipad 而不是移动设备编写了媒体查询。所以写成这样。

@media (max-width: 767px) and (min-width: 320px)
    .phone_screen {
        width: 240px;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }
于 2016-04-07T05:04:12.637 回答