如何在屏幕a为480px max-width时显示链接？

我想在屏幕有一定宽度时显示链接，例如iphone显示器使用@media查询。但在桌面版本上，不再显示该链接，即960像素。我尝试过使用display：none声明，但那对我没有用，这就是为什么我在这里。如何在屏幕a为480px max-width时显示链接？

下面是我的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; 
    } 
}

来源

2014-02-28 user3124280

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

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

我刚刚检查过你的代码，它是按照你描述的方式工作吗？

http://jsfiddle.net/n2Y6T/

的链接时，浏览器窗口进入到小于480像素消失。

来源

2014-02-28 21:55:18

这应该工作：首先隐藏链接，并且当浏览器是一定的宽度（在这种情况下为27 em）时，链接将显示为内嵌块。

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

来源

2014-02-28 21:57:30 jurjen

如何在屏幕a为480px max-width时显示链接？

回答

相关问题