html - 当屏幕 a 最大宽度为 480px 时，如何显示链接？

Question

我想在屏幕达到一定宽度时显示一个链接，就像 iphone 显示使用@media 查询。但在桌面版本上，不再显示该链接，即 960px。我试过使用 display:none 声明，但这对我不起作用，这就是我来这里的原因。

下面是我的 html 以及我正在使用的 css。如果有任何困惑，请告诉我。

请注意，这只是我当前元素的测试 html/css。

     <section id="blog_rwd">
        <h2>The Blog Starts Here!</h2>
        <span id="link"><a href="http://www.acumatica.com"><h3>Acumatica</h3></a>          </span>
        <article class="article_rwd">
        <h3>Article</h3>
         <p>"Lorem ipsum dolor sit amet,"</p>
        </article>
        <aside class="aside_rwd">
        <h3>Aside</h3>
         <p>"Lorem ipsum dolor sit amet,"</p>
        </aside>  
    </section>


@charset "utf-8";
/* CSS Document */

body {
    background-color:#CCC;
}

h1, {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.625em;     
}

h2 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.25em;  
}

h3 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.1em;  
}


#blog_rwd {
    width:60.714285714285714285714285714286%; /*Assume the native width of browser window is 1680px */
    margin:0 auto;
    padding:0.98039215686274509803921568627451%;
    background-color:#D2EEEB;
}

#blog_rwd #link {
    width: 50px;
    display:inherit;
    }

#blog_rwd .article_rwd {
    width: 78.431372549019607843137254901961%;
    float:right;
    padding-right:0.49019607843137254901960784313725%;
    background-color:#E3FDF8;

}

#blog_rwd .aside_rwd {
    width:17.647058823529411764705882352941%;
    float:left;
    padding-left:0.49019607843137254901960784313725%;
    background-color:#A5F1EA;
}

#blog_rwd p {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:.875em;
}

@media screen and (max-width:480px) {
    #blog_rwd {
        float: none;
        width: 92.431372549019607843137254901961%;
        background-color:#FFB3B3;

    }
    #blog_rwd  #link {
        display:block;

    }
}

@media screen and (max-width:830px) {
    #blog_rwd  #link {
        display: none;
        }
    }




@media screen and (max-width:830px) {
    #blog_rwd .aside_rwd{
        float: left;
        width: 98%;
        background-color:#95C9E8;
        margin-top:5px;
    }
}


@media screen and (max-width:830px) {
    #blog_rwd .article_rwd{
        float: left;
        width: 98%;
        background-color:#B0E6C6;
        margin-top:10px;
    }
}

Answer 1

@media only screen 
and (max-width : 480px) {
/* Styles */
   #link {
      display: none;
           }
}

这绝对有效。如果您发布一个示例，我可能会明白为什么它不起作用。

我刚刚检查了您的代码，它是否按照您描述的那样工作？

http://jsfiddle.net/n2Y6T/

当浏览器窗口小于 480 像素时，链接会消失。