仅使用 css 根据浏览器大小显示/隐藏 div?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17904018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide div based on browser size using ONLY css?
提问by JStormThaKid
I am a trying to get some divs to show/hide based on browser size, using only css media queries... but nothing seems to be working... please help if you can and let me know what i'm doing wrong... thanks in advance!
我正在尝试根据浏览器大小显示/隐藏一些 div,仅使用 css 媒体查询……但似乎没有任何效果……如果可以,请帮助我,让我知道我做错了什么。 .. 提前致谢!
heres my css..
继承人我的CSS ..
@media all and (max-width: 959px) {
.content .700{display:block;}
.content .490{display:none;}
.content .290{display:none;}
}
@media all and (max-width: 720px) {
.content .700{display:none;}
.content .490{display:block;}
.content .290{display:none;}
}
@media all and (max-width: 479px) {
.content .700{display:none;}
.content .490{display:none;}
.content .290{display:block;}
}
and here's my html
这是我的 html
<div class="content">
<div class="700">this is the content for desktop</div>
<div class="490">this is the content for tablet</div>
<div class="290">this is the content for mobile</div>
</div>
回答by Jerzy Zawadzki
class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work
类名不能以数字开头。将其更改为例如 x700,x490,x290,它应该可以工作
回答by Hushme
class name
can't be a number, and cannot start with a number in CSS. Here is an example where I changed the class name and it's working good
class name
不能是数字,也不能在 CSS 中以数字开头。这是我更改了类名并且运行良好的示例