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

我想在屏幕达到一定宽度时显示一个链接，如iphone显示屏use@media queries。但在桌面版本上，不再显示该链接，即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;
    }
}

这肯定行得通。如果你发布一个例子，我可能会明白为什么它不起作用

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

---

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

这应该可以工作：首先隐藏链接，当浏览器达到一定宽度27 em时，在这种情况下，链接将显示为内联块

.link a {display:none}
 @media (min-width: 27em) {
        .link a {
    display:inline-block;
    }
    }

.link a {display:none}
 @media (min-width: 27em) {
        .link a {
    display:inline-block;
    }
    }