Html 隐藏移动设备的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29536582/
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
Hiding image for mobile devices
提问by smither123
I'm trying to hide a certain image for mobile devices on my website. I've tried a various of html and css code and i cannot get it to work. It might have something to do with my div class's and Id tags.
我试图在我的网站上为移动设备隐藏某个图像。我已经尝试了各种 html 和 css 代码，但我无法让它工作。它可能与我的 div 类和 Id 标签有关。
please can someone try and get it to work for me?
请有人尝试让它为我工作吗？
HTML:
HTML：
<section id="left-sidebar">
<div class="logo">
<a href="#intro" class="link-scroll">
<img src="assets/images/other_images/logo.png" alt="description of image">
<img src="assets/images/other_images/nav.png" class="nav">
</a>
</div>
CSS:
CSS：
@media (max-width: 600px) {
#left-sidebar .logo .nav {
display:none;
}
}
回答by Jordi Castilla
You have to use @Media screen:
您必须使用@Media 屏幕：
screenUsed for computer screens, tablets, smart-phones etc.
screen用于电脑屏幕、平板电脑、智能手机等。
Combine it with pixel-ratioto fit your needs. Check more examples here
结合它pixel-ratio以满足您的需求。在此处查看更多示例
For example (for Samsung Galaxy S3):
例如（对于三星 Galaxy S3）：
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
{
// insert here your custom styles
#left-sidebar .logo .nav {
display:none;
}
}
回答by sanoj lawrence
instead using display:nonetry this
而是使用display:none试试这个
@media (max-width: 600px) {
#left-sidebar .logo .nav {
display:hidden !important;
}
}
this code will work if isn't still not working please check device width and go on
此代码将工作，如果仍然不工作请检查设备宽度并继续
回答by msm.oliveira
回答by smither123
This seemed to work for me, which was odd
这似乎对我有用，这很奇怪
@media (max-width: 768px) {
#left-sidebar .logo .nav {
display:none;
}
}
回答by Chandan Sharma
<style>
.youClassname{display:inline;}
@media screen and (min-width: 320px) {
.yourClassname{
display:none !important;
}
}
@media screen and (max-width: 768px) {
.yourClassname {
display:none !important;
}
}
</style>
