CSS 似乎不适用于移动设备答案

【问题标题】：CSS doesn't appear to work on mobile deviceCSS 似乎不适用于移动设备
【发布时间】：2016-03-22 23:05:04
【问题描述】：

我正在测试一个网站，它可以在台式机/笔记本电脑上完美运行，但是一旦使用移动设备，它就会失败。我的意思是页面无法识别。

示例页面已在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 那么我可以理解为什么它的样式不正确。

【问题讨论】：

您的前两个样式表要求浏览器使用的最小设备宽度为 650 像素和 1000 像素。看起来只有 css/deco_649.css 会加载到移动设备上。
@Carlton 我认为可能是这种情况。我问是因为当我在屏幕尺寸小于 649 像素的笔记本电脑上启动浏览器时，它仍然会加载所有三个样式表
是的，你是对的 - 只加载了最后一个样式表，并且它不包含太多 - 特别是 #first_section 没有背景图像，它占据了桌面的大部分空间版本。只有导航菜单存在（隐藏在按钮下）

标签： jquery html css mobile responsive-design

【解决方案1】：

您的“deco_full.css”文件中有这个 CSS 选择器。

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

这件作品定义了您的图像背景。但是您将此文件设置为仅在您的设备屏幕最小宽度为 1000 像素时使用。请看以下参考：

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

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

【讨论】：