css 隐藏移动的设备的图像

zqdjd7g9  于 2023-08-09  发布在  其他
关注(0)|答案(6)|浏览(137)

我正试图在我的网站上为移动的设备隐藏某个图像。我已经尝试了各种HTML和CSS代码,我不能让它工作。这可能与我的div类和Id标记有关。
有没有人能试着让它为我工作?
超文本标记语言:

<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;
    }
}

nkhmeac6

nkhmeac61#

您必须使用@Media屏幕:

屏幕用于电脑屏幕、平板电脑、智能手机等。

将其与pixel-ratio结合使用以满足您的需求。Check more examples here
例如(对于Samsung 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;
    }
}

字符串

ffscu2ro

ffscu2ro2#

<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>

字符串

hfwmuf9z

hfwmuf9z3#

我在JSFiddle上运行你的HTML和CSS。我把你的CSS改成:

img {
            display:none;
        }

字符串
得到this
不确定这是否是你要找的

gstyhher

gstyhher4#

这似乎对我有用,这很奇怪

@media (max-width: 768px) {
      #left-sidebar .logo .nav  {
            display:none;
   }
 }

字符串

abithluo

abithluo5#

使用display:none试试这个

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:hidden !important;
    }
}

字符串
这段代码将工作如果不是仍然不工作请检查设备宽度和继续

ct3nt3jp

ct3nt3jp6#

<style>
.youClassname{display:inline;}
@media screen and (max-width: 320px) {
      .yourClassname{
            display:none !important;
   }
 }

@media screen and (min-width: 768px) {
      .yourClassname  {
            display:none !important;
   }
 }

</style>

字符串

相关问题