아이디 응답

Question

나 자신을 위해 구축하고있는 웹 사이트에 문제가 있습니다.

http://quick.as/lnlhra

나는 아이콘이 브라우저의 크기에 반응하고 싶다. 지금은 각 아이콘마다 CSS가 설정되어 있으므로 왼쪽은 특정 비율로 설정됩니다. 하나 개의 아이콘를 들어, HTML은 다음과 같습니다

는

<a id="mail" class="social" href="mailto:nishadt15@gmail.com"></a> 

#mail 및 .social의 CSS는 다음과 같습니다

이

.social { 

position: absolute; 
top: 95%; 
height: 40px; 
width: 45px; 
text-decoration: none; 

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
border: 2px solid #3db48b; 
cursor: pointer; 

-webkit-transition: all 0.4s ease; 
-moz-transition: all 0.4s ease; 
-ms-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
transition: all 0.4s ease; 
} 

#mail { 
left: 39%; 
background: url(../img/mail.png) no-repeat center center; 
background-size: 40px 40px; 

}

분명히

퍼센트 왼쪽 설정이 때문에 나쁜 생각 백분율을 유지하려고 시도하는 동안 아이콘이 겹치기 시작합니다. 다른 방법으로이를 해결할 수있는 방법이 있습니까?

Answer 1

당신은 CSS 미디어 쿼리를 사용하여 아이콘이 반응 할 수 있습니다 :

예 :

@media (max-width: 600px) { 
    /* Styles for devices with maximum of 600px width */ 
    #mail { 
    left: 39%; 
    background: url(../img/mail.png) no-repeat center center; 
    background-size: 40px 40px; 
    } 
} 

@media (min-width: 600px) and (max-width: 1200px) { 
    /* Styles for devices with minimum of 600px width and up to 1200px in width */ 
    #mail { 
    left: 20%; 
    background: url(../img/mail2.png) no-repeat center center; 
    background-size: 80px 80px; 
    } 
} 

심지어에만 위치를 변경하지 다른 이미지를 지정할 수 있습니다