如何使css在移动设备上显示图像但不在桌面上显示答案

【问题标题】：How to make css to show a image on mobile but not in desktop如何使css在移动设备上显示图像但不在桌面上显示
【发布时间】：2021-12-01 16:13:52
【问题描述】：

您好，我正在创建一个有趣的网站（我很无聊）我正在使用 css 中的媒体查询使其具有响应性，但我遇到了一个问题，我已经有一个用于桌面的 html 标题和一个用于移动设备的第二个标题我想要第二个标题（适用于移动设备）将在移动设备中显示，但不在桌面显示，这是我的 home.html

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Beast Code's</title>
    <style>
    
        ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333333;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111111;
    }
        
        
        
        </style>
        
        <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
        </ul>
 
</head>
<body>
    <div class="conatiner-1">
    <div class="container">
      <div class="title">
          <h1>I am CaptainBeast</h1>
      </div>
      <div class="avatar">
      <img src="stuffs/pfp.jpg">
    </div>
    <div class="mobile-t">
      <h1>Hello i am CaptainBeast</h1>
    </div>
    
   
     
    </div>

</div>
    
</body>



</html>

我的样式.css

*{
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
    


.conatiner-1{
    height: 100vh;
    width: 100%;
    background-image: url(stuffs/background.png);
    background-position: center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    position: relative;
}
.title{
    font-size: 36px;
    font-family: 'Oswald', sans-serif;
    color: blue;
    margin-left: 425px;
    top: 100px;
    position: relative;
}
.title {
    border-right: solid 3px rgba(0,255,0,.75);
    white-space: nowrap;
    overflow: hidden;    
    font-family: 'Source Code Pro', monospace;  
    font-size: 28px;
    color: rgba(90, 145, 207, 0.7);
  }
  
  /* Animation */
.title {
    animation: animated-text 4s steps(29) 1s 1 normal both,
               animated-cursor 600ms steps(29) infinite;
  }
  
  /* text animation */
  
  @keyframes animated-text{
    from{width: 0;}
    to{width: 580px;}
  }
  
  /* cursor animations */
  
  @keyframes animated-cursor{
    from{border-right-color: rgba(0,255,0,.75);}
    to{border-right-color: transparent;}
  }

@media only screen and (min-width: 900px){

  
.avatar img{
  display: none;
}
}


.title-m{
    overflow: hidden;
}
.mobile-t{
  display: none;
}
@media screen and (max-width: 400px){

.container{
        overflow: hidden;
    }
.conatiner-1{
        height: 100vh;
        width: 100%;
        background-image: url(stuffs/background.png);
        background-position: center;
        background-size: cover;
        padding-left: 5%;
        padding-right: 5%;
        box-sizing: border-box;
        position: relative;
}
.avatar img{
  
  border-radius: 50%;
  height: 300px;
  width: 320px;
  position: relative;
  left: 1000px;
  top: 60;
  image-resolution: from-image;
  
}
.mobile-t{
  font-size: 16px;
}



}

希望我能得到一个好的答案提前谢谢！

【问题讨论】：

在移动版本的媒体查询中添加.mobile-t{display:block}
tysm 它工作正常，我应该为图像做什么？
也是一样的，在查询中使用 display:none 就完成了。我建议阅读docs about media queries
我的意思是我应该怎么做才能使图像显示在移动设备上而不是桌面上
在媒体查询开始之前，您应该添加 img{display:none} 并在媒体查询中添加 img{display:block}

标签： html css web

【解决方案1】：

我在一些项目中使用过它，它确实对我有用。要在移动设备上显示部分：

<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
    <style type="text/css">
   .mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>

要在移动设备上隐藏部分：

    <div class="mobileHide">
    TEXT OR IMAGE NOT FOR MOBILE HERE
    </div>
<style type="text/css">
   .mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){  .mobileHide { display: none;}}
</style>

【讨论】：