Question

我有一个我的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;
}

Answer 1

您可能想要调整main.css中的媒体查询

@media all和（max-width：699px）和（min-width：520px），（min-width： 1151px）

现在的方式，对于宽度低于520px的屏幕，CSS将不会被应用。

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

中找到

Answer 2

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

移动设备不会访问CSS

2 个答案: