Question

我正在测试一个网站，它在桌面/笔记本电脑上工作得很好，但是一旦使用移动设备，它就会变得非常可怕。我的意思是页面无法识别。

示例页面已在http://danjamespalmer.com/projects/decoathletic/index.html上启动并运行。可以从源查看所有CSS和JS。这是一个完全相同的例子：

HTML：

<!doctype html>

<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Deco Athletic || You Decide</title>

    <!-- JavaScript -->
    <script src="jquery/jq.js"></script>
    <script src="js/deco.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <!-- Stylesheets -->
    <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">
    <link rel="stylesheet" media="screen and (min-device-width: 650px) and (max-width: 999px)"  href="css/deco_650.css">
    <link rel="stylesheet" media="screen and (max-width: 649px)" type="text/css" href="css/deco_649.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">


</head>
<body>

<div id="main>">
    <div id="header">
        <div id="header_data">
            <div id="logo"><a href="index.html"><img src="images/logo.png" alt="deco athletic logo" class="logo_image"></a></div>
            <div id="mobile_menu_icon"></div>
            <div id="navbar">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">SHOP</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="first_section">

    </div>

     <div id="second_section">
    test
    </div>

</div>
</body>

</html>

主页CSS：

html, body  {
    margin:0px;
    height:100%;
}

#main {
    width: 100%;
    margin: 0 0 0 0;
    padding: 0;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#header {
    height:90px;
    width:100%;
    background-color:#C03133;
    margin: 0px auto;
}

#header_data {
    height:90px;
    width:1000px;
    background-color:#C03133;
    margin: 0px auto;
    position:relative;
}

#logo {
    position: absolute;
    top: 50%; left: 0%;
    transform: translate(-0%,-50%); /* left,top */
}

#navbar {
    position: absolute;
    top: 90%; left: 100%;
    width:420px;
    transform: translate(-100%,-100%); /* left,top */
}


/* Navigation Bar <ul> */
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Navigation Bar <li> */
#navbar li {
    display: inline;
    margin: 10px;
}

/* Navigation Bar <a> */
#navbar li a {
    font-size:18px;
    color:#FFFFFF;
}

#first_section {
    background-image:url(../images/bg_low.jpg);
    background-size:cover;

}

#second_section {
    margin: 0px auto;
    position:relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}

使用任何浏览器在笔记本电脑上进行测试时，我可以调整页面大小并按预期响应。但是，当加载到移动设备上时，它只是无法加载。

是否要在移动设备上加载所有CSS文件？

正如您所看到的，我有3个与不同屏幕宽度相关的CSS文件。如果移动设备仅加载css / deco_649.css，那么我就能理解为什么它没有正确的样式。

Answer 1

你的＆＃34; deco_full.css＆＃34;中有这个CSS选择器。文件。

#first_section {
    background-image: url(../images/bg_low.jpg);
    background-size: cover;
}

这件作品定义了你的图像背景。但是，只有在设备屏幕最小宽度为1000px时才设置此文件。请看以下参考：

<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">

但是，您在为移动设备和平板电脑设备推出的另外两个CSS文件中，您的背景定义并不相同。将相同的CSS（可能包含不同的图像）添加到这两个CSS文件中，您就可以了。

CSS似乎不适用于移动设备

1 个答案: