Создание отзывчивого меню с использованием медиа-запросов: Меню не масштабируется

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 для s укажите размер шрифта.

UL и OL ведут себя как-то особенные, потому что я думаю, что по умолчанию размер шрифта используется из элемента LI, а не из UL.

Так что если вы укажете его на 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; 
    } 
}