我正试图在我的网站上隐藏移动设备的某个图像。我已经尝试了各种html和css代码,我无法让它工作。它可能与我的div类和Id标签有关。
请有人试着让它为我工作吗?
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:
@media (max-width: 600px) {
#left-sidebar .logo .nav {
display:none;
}
}
你必须使用@Media screen:
屏幕用于电脑屏幕,平板电脑,智能手机等。
将它与pixel-ratio
结合起来,以满足您的需求。 Check more examples here
例如(对于三星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;
}
}
这似乎对我有用,这很奇怪
@media (max-width: 768px) {
#left-sidebar .logo .nav {
display:none;
}
}
而是使用display:none
试试这个
@media (max-width: 600px) {
#left-sidebar .logo .nav {
display:hidden !important;
}
}
如果仍然不能正常工作,此代码将起作用请检查设备宽度并继续
<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>