Question

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

Answer 1

这里有许多媒体查询特定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范围内时，宽度为240px将应用于phone-screen类。

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

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

网站上的结构很差，我强烈建议实际实现bootstrap，在http://getbootstrap.com/找到这将真正帮助您理解需要如何构建响应性的内容。你不能只把div放在一起，并且假设事情不会在较小的窗口中消失（实际上，由于上面提到的媒体查询，你的情况下会出现'屏幕外'）。

Answer 2

对于移动设备最大宽度是767而不是768确定所以请考虑这个问题。你为ipad写的媒体查询不是为了移动确定。所以这样写的。

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

Answer 3

我会实现bootstrap。我已经为您清理了HTML。

https://jsfiddle.net/w8crtf2p/

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

然后查看bootstrap，看看您的网站需要什么。

<!-- 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>

只有一些CSS在手机上加载，在桌面上工作得很好

3 个答案: