"陀螺"和“底部”不要在@media中工作 [英] "Top" and "Bottom" don't work in @media

问题描述

我试图为iPad设计自适应网站。所以，我遇到了左侧栏和顶部导航栏的问题。它和头球之间有一点差距。
我想在@media中使用top来修复它，但是这个函数不起作用。

这个函数的功能很好。
所以，如果有人愿意，请写信给我我犯了什么错误

@media only screen and（min -device-width：768px）和（max-device-width：1024px）{.topnav {top：50％; }一边{最小宽度：17％;最小高度：100％;底部：30px; }}抛开{/ *侧边栏* /填充：5％0.5％;保证金：0％汽车;位置：固定;左：0;向左飘浮; list-style-type：none;宽度：15％; background-image：url（images / side.PNG）;背景重复：重复-Y;背景大小：75％;身高：100％;前10名％; z-index：-2;} aside li {font-family：Verdana，Arial，sans-serif，helvetica; font-size：11px; margin-bottom：10px;宽度：140px; font-weight：700; text-align：left; line-height：15px; } .topnav {margin：6.2％;保证金余额：20％;溢出：隐藏;宽度：100％;身高：2.5％;顶部：0％;位置：固定;背景颜色：红色;文本对齐：中心; z-index：2; } / *导航链接* /。topnav a {margin：0 auto;显示：内联;保证金左：3px的; line-height：12px; font-size：11px; font-weight：700;向左飘浮; font-family：verdana，sans-serif，helvetica，arial;显示：块;颜色：＃f2f2f2; text-align：center;填充：5px 10px;文字修饰：无; z-index：3;}

 <！DOCTYPE html> ;< html lang =ru> < HEAD> < meta charset =utf-8>< meta http-equiv =X-UA-Compatiblecontent =IE = edge>< meta name =viewportcontent =width = width，initial-scale = 1.0>< link rel =stylesheethref =style.css>< title>Новости - Анонсы< / title> < /头><身体GT; <报头GT; < img src =images / headerfinal.pngclass =Headeralt =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> <节> <>< p>< h3 class =News>Новости - Анонсы< / h3>< br>< br>< p> 10月2017年годаКонституционныйСудРФпровозгласитПостановлениепо делуопроверкеконституционностиФедеральногозакона«ОвнесенииизмененийвотдельныезаконодательныеактыРФвчастисовершенствованиязаконодательстваопубличныхмероприятиях»< / p为H.<峰; br>< p为H.（小于; A HREF = ＃顶部 >подробнее。 ..< / A>）< / p为H.<峰; br>< p为H. 7ноября2017годаКонституционныйсудРФпровозгласилПостановлениеподелуопроверкеконституционностирядаположенийЗаконаРеспубликиКрым«Обособен < / p>< br>< p>（< a href =＃top>подробнее...< / a>）< / p> ;<峰; br> < a href =＃top>查看更多信息< / a>< br> < /节> <一旁> <！ - Менюслева - >< 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.gifalt =ГербРФalign = center> < /预留><峰; br><峰; br> <页脚> < hr style =border：1px; height：1px; width：70％; margin-left：270px; background-color：black> < img src =images / footer.PNGclass = footerline alt =Footer> < a href =index.html>©КонституционныйСудРоссийскойФедерации，2008-2017< / a> < / footer>< / body>< / html>  

解决方案

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

两个规则集都有相同的选择器（ .topnav ），所以它们同样具体。 $ b

第一个 top 设置为。 code> 50％; ，那么第二个规则将它设置为 top：0％; 。

更改规则的顺序。

I've tried to make adaptive design of site for iPad. So, i have a problem with left-sidebar and top-nav. Between it and header have a little gap. I had wanted to fix it using "top" in @media, but this function doesn't work.

In common style this function works great. So,if anybody can, please write me what mistake I made

@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;
}

<!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>

解决方案

Media queries have no influence over specificity. The normal rules of the cascade apply.

Both your rulesets have the same selector (.topnav), so they are equally specific. The means that rules are applied in order.

First top is set to 50%;, then the second rule sets it to top: 0%;.

Change the order of your rules.

这篇关于"陀螺"和“底部”不要在@media中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！