img在手机屏幕上显示半切但在电脑屏幕上确定,css jQuery?

时间:2015-05-19 02:43:55

标签: javascript jquery html css

移动屏幕上发生了奇怪的事情。在电脑屏幕上没问题。当用户点击img时,它会删除img,然后点击另一个按钮,它会显示img。看到img,当它显示时,它就像第一个,半切,当我移除时,它就像第二个,选择仍在那里。我怎么能用css解决这个问题?我的代码如下。感谢。如果我删除位置:固定为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;
}




enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

CSS:

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

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

我希望这会有所帮助。把它放在你的CSS中。对于平板电脑,您可以使用768视口,对于手机,您可以使用420视口。