미디어 쿼리를 사용하여 특정 중단 점에서 li 요소의 크기를 조정할 수 있습니까?

내 페이지 하단에 소셜 미디어 아이콘 블록을 만들었습니다.미디어 쿼리를 사용하여 특정 중단 점에서 li 요소의 크기를 조정할 수 있습니까?

375px보다 작은 화면의 경우 절반 크기로 만들고 싶지만 미디어 쿼리가 작동하지 않습니다.

@media (max-width: 275px) { 
.custom-social-icon 
    padding:5px 7px; 
} 

.fa-facebook { 
padding:10px 14px; 
transition: .5s; 
background-color: lightsteelblue; 
}

그리고 내 HTML :

<div class="footer-social-icons"> 
<ul class="social-icons"> 
    <li><a href="#" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li>

내가 중단 점 이하로 화면 크기를 조정

이 아이콘이 같은 크기를 유지

은 여기 내 CSS의 일부입니다. 내가 도대체 뭘 잘못하고있는 겁니까? 당신의 도움을 주셔서 감사합니다!

출처

2017-03-15 sim

당신은 당신의 미디어 쿼리 내부에 약간의 중괄호 누락 '{}'코드에

@media (max-width: 275px) { 
.custom-social-icon{ 
    padding:5px 7px; 
    } 
    .fa-facebook { 
    padding:10px 14px; 
    transition: .5s; 
    background-color: lightsteelblue; 
    } 
}

출처

2017-03-15 08:14:18 Aierto

다음 코드를 사용하면 도움이됩니다. 아래로 여기 CSS를 변경 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title> Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/font-awesome-animation.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     @media (max-width: 375px) { 
     .fa-facebook{ 
     padding:5px 7px !important; 
      } 
     } 
    .fa-facebook { 
     padding:10px 14px; 
     transition: .5s; 
     background-color: lightsteelblue; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="footer-social-icons"> 
     <ul class="social-icons"> 
     <li><a href="#" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li> 
     </ul> 
    </div> 
    </body> 
</html>

출처

2017-03-15 08:07:59 KiranPurbey

감사합니다. @Kiran! 사실 6 개의 아이콘이 있습니다. 나는 이것을 하나씩 해왔지만 모든 아이콘에 한번에 적용하는 방법이 있다고 가정합니다. 어떤 생각? 나는 그것을 해결할 수 없다. 감사! – sim

각 아이콘에 동일한 클래스 이름을 추가하십시오. 그리고 해당 클래스 이름 내에 공통 속성을 추가하십시오. – KiranPurbey

좋아요! 감사합니다 @Kiran – sim

그것의 단순한 실수. 미디어 쿼리를 이것으로 바꾸면 완벽하게 작동합니다.

@media (max-width: 275px) { 
.custom-social-icon { 
    padding:5px 7px; 
} 

.fa-facebook { 
    padding:10px 14px; 
    transition: .5s; 
    background-color: lightsteelblue; 
} 
}

출처

2017-03-15 08:17:14 Ridhik

미디어 쿼리를 사용하여 특정 중단 점에서 li 요소의 크기를 조정할 수 있습니까?

답변

관련 문제