显示和隐藏取决于屏幕尺寸

-2

<style> 
@media screen and (min-width: 0px) and (max-width: 400px) { 
    #my-content{ display: none; } /* show it on large screen */ 
} 
@media screen and (min-width: 401px) and (max-width: 1024px) { 
    #my-content{ display: block; } /* hide it small screens */ 
} 
<style> 
<div id="my-content">

此代码有效，但我想添加一个按钮以在小设备上显示/隐藏此“my-content”。我不想在大屏幕上显示此按钮。此按钮仅在小屏幕上显示。我想用这个代码与引导站点。显示和隐藏取决于屏幕尺寸

来源

2017-06-12 Anik Chakraborty

我想你会想一些更多的标签添加到您的问题。像编程语言，平台等 – SHG

你能告诉我所有的代码....我不是这方面的专家... –

检查此链接 https://stackoverflow.com/questions/2777139/how -to-的用jQuery的对显示隐藏-div的基础上，单选按钮选择 – toiglicher

Bootstrap已经有类隐藏事物/使它们可见。检查这些是否在你的样式表中。 http://getbootstrap.com/css/

。可见-XS- ，。可见-SM-，。可见-MD-，。可见-LG- .hidden-XS，.hidden-SM，.hidden-MD，.hidden -lg

来源

2017-06-12 20:05:40 Harley

你只是做了与你想要的相反的东西。这里是一个快速的解决办法：

@media screen and (min-width: 0px) and (max-width: 400px) { 
 
    #my-content{ display: block; } /* show it on smaller screen */ 
 
} 
 
@media screen and (min-width: 401px) and (max-width: 1024px) { 
 
    #my-content{ display: none; } /* hide it on larger screens */ 
 
}

<div id="my-content"> 
 
Shows only on screens having max width of 400px. 
 
Resize your browser's width to see changes 
 
</div>

来源

2017-08-08 18:10:55 ihpar

显示和隐藏取决于屏幕尺寸

回答

相关问题