Question

这是我的html代码，我的目标是两个媒体查询：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" 
href="assests/css/style.css">
    <meta name="viewport" content="width=device-width, initial-
scale=1">
    <title>Stacy Areas</title>
</head>
<body>
    <div class="mainContainer">

        <header id="navLink">
           <div class="container">
            <a href="index.html" id="logo">Stacy Areas</a>
            <nav>
              <a href="index.html">About</a>
              <a href="portfolio.html">Portfolio</a>
              <a href="contact.html">Contact</a>
           </nav>
          </div>
        </header>

    <div class="aboutMe">
        <div class="aboutHeader">
            <h2>About Me</h2>
        </div>

        <div class="aboutContent">
            <img class="aboutImage" src="assests/images/me.jpg" 
alt="stacy areas">
            <p>stuff</p>
        </div>
    </div>

    <div class="iconLinks">
        <h3>Connect with me</h3>

        <a href="https://github.com/stacy89"><img 
src="assests/images/github.png"></a>
        <a href="https://www.linkedin.com/in/stacyareas/"><img 
src="assests/images/linkedin.png"></a>
        <a href="https://stackoverflow.com/users/7371834/stacy-areas">
<img src="assests/images/stackoverflow.png"></a>
    </div>

    <footer>copyright @ 2018 stacyareas</footer>
</div>
</body>
</html>

这是我的css代码，用于调用我的两个查询。我觉得我对如何使用它们有一个基本的了解，但我没有太多使用它们的经验，所以我可能只是误解。或者也许过度看。

@media only screen and (max-width: 980px, 768px, 640px) {
    .mainContainer {
        background-color: black;
    }       

    .iconLinks {
        width: 670px;
    }    
}

媒体查询不起作用。当我检查一下是否有效时，什么也没发生。

0 个答案: