Question

我试图为iPad制作网站的自适应设计。所以，我有左侧边栏和顶部导航的问题。它与标题之间有一点差距。我本来想用＆＃34; top＆＃34;来修复它。在@media中，但这个功能不起作用。

在通用风格中，此功能非常有效。所以，如果有人可以，请写下我犯了什么错误

＆＃13;

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .topnav {
        top: 50%;
    }
    
    aside {
        min-width: 17%;
        min-height: 100%;
        bottom: 30px;
    }
}


aside { /*Sidebar*/
    padding: 5% 0.5%;
    margin: 0% auto;
    position: fixed;
    left: 0;
    float:left;
    list-style-type: none;
    width:15%; 
    background-image: url(images/side.PNG);
    background-repeat:repeat-y;
    background-size: 75%;
    height: 100%;
    top: 10%;
    z-index: -2;
}

aside li {
    font-family: Verdana, Arial , "sans-serif", helvetica;
    font-size: 11px;
    margin-bottom: 10px;
    width: 140px;
    font-weight: 700;
    text-align: left;
    line-height: 15px;
    
}


.topnav {
    margin:6.2%;
    margin-left: 20%;
    overflow: hidden;
    width: 100%;
    height: 2.5%;
    top: 0%;
    position: fixed;
    background-color: red;
    text-align:center;
    z-index: 2;
    
}

/* Navigation links */
.topnav a {
    margin:0 auto;
    display:inline;
    margin-left:3px;
    line-height: 12px;
    font-size: 11px;
    font-weight: 700;
    float:left;
    font-family: verdana, "sans-serif", helvetica, arial;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    z-index: 3;
}

＆＃13;

<!DOCTYPE html>
<html lang="ru">
    <head>    
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
    </head>
<body>
     <header>
    <img src="images/headerfinal.png" class="Header" alt="Header">
    </header>
    <nav>
    <div class="topnav"> <!--Верхнее меню -->
  <a href="#top">Новости</a>
  <a href="#top">О Суде</a>
  <a href="#top">Решения КС РФ</a>
  <a href="#top">Заседания КС РФ</a>
  <a href="#top">Контакты</a>
    </div>
    </nav>
    
    <section> <!-- Основной текст -->
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p>
<br>
<p>( <a href="#top">подробнее...</a>)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p>
<br>
<p>( <a href="#top">подробнее...</a>)</p>

<br>
    <a href="#top">Посмотреть все новости</a>
<br>
    </section>
    <aside> <!-- Меню слева -->
<ul>
<br>
<br>
<br>
<li><a href="#top">Новости</a></li>
<li><a href="#top">О Суде</a></li>
<li><a href="#top">Решения КС РФ</a></li>
<li><a href="#top">Заседания КС РФ</a></li>
<li><a href="#top">Контакты</a></li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ" align=center>
    </aside>
<br>
<br>
    <footer>
        <hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black">
    <img src="images/footer.PNG" class=footerline alt="Footer">
        <a href="index.html">©Конституционный Суд Российской Федерации, 2008-2017</a>
    </footer>
</body>
</html>

＆＃13;

Answer 1

媒体查询对特异性没有影响。级联的正常规则适用。

您的规则集都具有相同的选择器（.topnav），因此它们具有相同的特定性。这意味着规则应用按顺序。

首先top设置为50%;，然后第二个规则将其设置为top: 0%;。

更改规则的顺序。

＆＃34;顶＆＃34;和＆＃34;底部＆＃34;不在@media工作

1 个答案: