移动设备无法访问 CSS答案

【问题标题】：Mobile Devices won't acess CSS移动设备无法访问 CSS
【发布时间】：2014-05-02 22:05:19
【问题描述】：

我有一个通过我的Dropbox 托管的网站，用于学校作业。人们将通过移动设备查看它。 CSS 可以在台式机上运行，但是当移动设备访问该页面时，CSS 不会加载。

HTML：

<!DOCTYPE html>
<html>
<head>
<!--Meta Data-->
<meta charset="utf-8">
<meta name="author" content="Kieran 'Alfonzo' D'Mello">
<meta name="viewport" content="width=device-width">

<title>Artemis the Greek</title>

<!--CSS Load-->
<link type="text/css" rel="stylesheet" href="main.css" />
<link type="text/css" rel="stylesheet" href="../Public/IDs.css" />
<link type="text/css" rel="stylesheet" href="../Public/scrollover.css" />

<!--jquery load-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!--Smooth Scroll Load-->
<script type="text/javascript" src="../Public/smoothscroll.js"></script>

</head>

<body>
<header>
    <div id="header-content">
        <h1><a href="#top" class="smoothScroll">Artemis</a></h1>
        <nav id="nav">
            <ul>
                <li><a href="#top" class="smoothScroll">Home</a></li>
                <li><a href="#one" class="smoothScroll">About Her</a></li>
                <li><a href="#two" class="smoothScroll">Symbols</a></li>
                <li><a href="#three" class="smoothScroll">Myths</a></li>
                <li><a href="#four" class="smoothScroll">References</a></li>
            </ul>
        </nav>
    </div>
</header>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a id="top"></a>
<div id="tableofcontents">
    <h2><u>Table of Contents</u></h2>
    <br />
    <ul>
        <li><a href="#top" class="smoothScroll">Home</a></li>
        <li><a href="#one" class="smoothScroll">About Her</a></li>
        <li><a href="#two" class="smoothScroll">Symbols and Characteristics</a></li>
        <li><a href="#three" class="smoothScroll">Myths and Common Legends</a></li>
        <li><a href="#four" class="smoothScroll">Modern References</a></li>
    </ul>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

<!--About Her-->
<div id="one">
    <h2>About Her</h2>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

<!--Symbols and Characteristics-->
<div id="two">
    <h2>Symbols and Characteristics</h2>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

<!--Myths and Common Legends-->
<div id="three">
    <h2>Myths and Common Legends</h2>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

<!--Modern References-->
<div id="four">
    <h2>Modern References</h2>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>

</body>
</html>

CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dy, dd, img, form, fieldset,input, textarea, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    clear: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica", sans-serif;
}

hr {
    color: #45567A;
}

body {
    width: fit-content;
    background: #fff;
    font: 20px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    position: relative;
    height: initial;
    text-align: center;
    z-index: 5;
}

a {
    text-decoration: none;
    color: #45567A;
}

a:hover {
    color: #274a76;
}

header {
    position: fixed;
    height: 100px;
    width: 100%;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    z-index: 9;
    padding: 0px;
    margin: 0px;
    display: block;
}

#header-content {
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0 0 0;
    overflow: hidden;
}

#header-content h1 {
    float: left;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#header-content nav {
    float: right;
}

#header-content nav li {
    text-align: right;
    float: left;
    margin: 0 0 0 50px;
    list-style: none;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    display: block;
    font-size: 25px;
}

【问题讨论】：

+1 以获得良好的格式
移动设备可能会被投递箱重定向，你能给我们链接吗？
为了网站？ dl.dropboxusercontent.com/u/64838063/artemisthegreek/Content/…
<br/><br/><br/>这里好冷！

标签： html css mobile

【解决方案1】：

您可能希望从 main.css 调整媒体查询

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151像素）

现在的做法是，对于宽度小于 520 像素的屏幕，不会应用 CSS。

您的问题中没有包含媒体查询部分，但可以在此处找到https://dl.dropboxusercontent.com/u/64838063/artemisthegreek/Public/main.css

【讨论】：

【解决方案2】：

实际上是加载了css文件。但是在您的 main.css 文件中，您使用了错误的媒体查询。您的 css 应用在 520px 和 699px 之间，超过 1151。所以没有低于 520（手机）的 css，也没有低于 699px 和 1151 之间。

【讨论】：