미디어 쿼리를 사용하여 반응 형 메뉴 만들기 : 메뉴가 축척되지 않음

Question

미디어 쿼리를 사용하여 다른 해상도로 메뉴를 작동 시키려고하지만 어딘가에 고정되어 있습니다. 1025 ~ 1441 픽셀 사이에서 글꼴 크기는 화면에 따라 변경해야하지만 그렇지 않습니다. 대신 브라우저 크기를 줄이면이 ​​사실을 알 수 있습니다.

http://i.imgur.com/KasiLZw.png (난 당신의 대부분은 이미지를 싫어하는 알고 있지만 난 그냥 케이스에 추가) 여기

내 코드입니다 : http://codepen.io/anon/pen/dPVzaW

HTML

<div id="cssmenu"> 
    <ul> 
     <li class='active'><a href='/book/<?php echo $url; ?>'><span>Page details</span></a></li> 
     <li><a href='/details/<?php echo $url; ?>'><span>Book details</span></a></li> 
     <li><a href='/comments/<?php echo $url; ?>'><span>Comments</span></a></li> 
     <li><a href='/suggestions/<?php echo $url; ?>'><span>Suggestions</span></a></li> 
     <li><a href='/lists/<?php echo $url; ?>'><span>Lists</span></a></li> 
     <li><a href='/inculture/<?php echo $url; ?>'><span>In culture</span></a></li> 
     <li><a href='/cover-images/<?php echo $url; ?>'><span>Cover images</span></a></li> 
    </ul> 
</div> 

CSS

#cssmenu { 
    width: 55%; 
} 

#cssmenu ul { 
    width: 100%; 
    border-radius: 3px; 
    padding: 0; 
    list-style-type: none; 
    position: relative; 
    display: block; 
    font-size: 0.8em; 
    font-weight: bold; 
    background-color: #6A5546; 
    font-family: Arial, Helvetica, sans-serif; 
    border-bottom: 1px solid #353535; 
    zoom: 1; 
} 

#cssmenu ul:before { 
    content: ''; 
    display: block; 
} 

#cssmenu ul:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

#cssmenu li { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0 4px; 
} 

#cssmenu li a { 
    display: block; 
    float: left; 
    color: #b4aaa2; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 10px 20px 7px 10px; 
    border-bottom: 3px solid transparent; 
} 

#cssmenu li a:hover { 
    color: #FFFFFF; 
    border-bottom: 3px solid #00b8fd; 
} 

#cssmenu li.active a { 
    display: inline; 
    border-bottom: 3px solid #00b8fd; 
    float: left; 
    margin-left: 1px; 
} 

@media screen and (min-width: 1025px) and (max-width: 1441px) { 
    #cssmenu { 
     width: 57%; 
    } 

    #cssmenu ul { 
     width: 100%; 
     border-radius: 3px; 
     padding: 0; 
     list-style-type: none; 
     position: relative; 
     display: block; 
     font-size: 0.8em; 
     font-weight: bold; 
     background-color: #6A5546; 
     font-family: Arial, Helvetica, sans-serif; 
     border-bottom: 1px solid #353535; 
     zoom: 1; 
    } 

    #cssmenu ul li a { 
    } 

} 

Answer 1

귀하의 문제는 잘못된 CSS 선택기를 사용하여 관련이 있습니다 글꼴 크기를 지정하십시오.

UL과 OL은 기본적으로 글꼴 크기가 UL 요소가 아니라 LI 요소에서 사용되기 때문에 특별한 행동을합니다.

UL에 지정했지만 기본적으로 LI에 크기가 있으면 변경되지 않습니다. LI에 지정해야합니다. 이 같이

는 :

#cssmenu li { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0 4px; 
    font-size: 1em; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
} 

@media screen and (min-width: 1025px) and (max-width: 1441px) { 
    #cssmenu ul li { 
     font-size: 0.8em; 
    } 
}