javascript - img 在手机屏幕上显示一半，但在电脑屏幕上正常，css jQuery？

Question

奇怪的事情发生在手机屏幕上。在电脑屏幕上显示正常。当用户单击 img 时，它将删除 img，然后单击另一个按钮，它将显示 img。看到 img，当它显示时，它就像第一个，切了一半，当我删除时，它就像第二个一样，镐还在。我怎样才能用CSS解决这个问题？我的代码如下。感谢。如果我删除 position:fixed 用于 img 下方的文本，则可以，但我需要修复它。

$('#avatar-suggestions-selector').click(function(){
               		$('.avatar').fadeIn();
					$('#img_text').fadeIn();
			});

$('#avatar-suggestions-selector_s').click(function(){
                $('.avatar').fadeOut();
					$('#img_text').fadeOut();
			});

 img.avatar{
   	display:none;
	position:fixed ;
    top: 61px ;
    left: 12px ;
	width:140px;
	
}
#img_text{
	display:none;
	position: fixed;
	left: 25px;
	background: none repeat scroll 0% 0% #6d9bff;
	top: 218px;
	color: white;
	padding: 8px;
	border-radius: 9px;
}

Answer 1

CSS:

    @media screen and (max-width: 768px){
       img.avatar{
          width: 100%;
       }
    }

    @media screen and (max-width: 420px){
       img.avatar{
          width: 100%;
       }
    }

希望对您有所帮助。只需将其放入您的 CSS 中即可。对于平板电脑，您可以使用 768 视口(viewport)，对于手机，您可以使用 420 视口(viewport)。