масштабирование меню в макете жидкости

Question

У меня есть логотип с меню рядом с ним:

Это HTML:

<div id="logomenuwrapper"> 
<div id="logo"><img src="img/logo_light.jpg"/></div> 
<div id="menu"> 
    <ul> 
     <li><a href="#">About</a></li> 
     <li class="notfirst"><a href="#">Work</a></li> 
     <li class="notfirst"><a href="mailto:maarten@codesigner.be?subject=Hello">Contact</a></li> 
    </ul> 
</div> 
</div> 

Это CSS:

#logomenuwrapper{overflow:hidden;} 
#logo 
{ 
    padding-right:1.2%;float:left; max-width:100% !important; 
    max-height:100% !important; 
    display:block; 
} 
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;} 
#menu ul li.notfirst 
{ 
    padding-top:0.3225em; 
} 

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

В какой-то момент меню будет меньше логотипа. Что я должен добавить, чтобы сделать масштаб логотипа с помощью меню? Я уже добавил:

img {max-width:100%;} 

картина того, как она выглядит на маленьком экране (как вы можете видеть логотип слишком велик):

Answer 1

Попробуйте изменить медиазапросы к чему-то вроде этого:

@media screen and (max-width: 800px) { 
    body { 
     font-size: 85%; 
    } 
    #logo img { 
     width:84%; 
    } 
} 
@media screen and (max-width: 400px) { 
    body { 
     font-size: 75%; 
    } 
    #logo img { 
     width: 75%; 
    } 
} 

и #logo к чему-то вроде этого:

#logo { 
    padding-right:12px; 
    border-right:1px solid #ea4a4a; 
    float:left; 
} 

Working Example

Примечание: Не забудьте положить @media screen and (max-width: 800px)выше
@media screen and (max-width: 400px), как показано выше.

См. Why do the order of media queries matter in CSS? для получения дополнительной информации о размещении медиа-запросов в заказе.

Answer 2

Вы должны установить ширину изображения wrapper (#logo в вашем случае) внутри медиа-запросов, чтобы получить масштабированное изображение. Или установите его глобально в процентах (см. Ссылку jsfiddle).

Также добавьте max-width: 100%; для всех изображений.

img { max-width: 100%; } 

#logo { 
    width: 14%; 
    // remove max-width:100. not needed. 
    ... 
} 

См http://jsfiddle.net/weP7u/ и изменить размер браузера

Answer 3

Это правда, не смысловое ... но вы смотрели в масштабируемый текст - FITTEXTJS

Он использует JavaScript - но это позволяет текст для масштабирования, а также. У вас уже есть решение для изображения. Но я вижу, что проблема заключается в самом тексте. Используя медиа-запросы, вы определяете точки останова, но не делаете ваш текст столь же жидким, как вам. Я отредактирую свой пост со скрипкой, как только вернусь из спортзала, просто подумал, что опубликую это, думая, что МОЖЕТ быть полезным.

Answer 4

Я думаю, что вы об этом ошибаетесь. Зачем уменьшать размер текста при меньшем экране? Вероятно, это происходит на мобильном устройстве, где вам нужно убедиться, что у вас есть целевые объекты с сенсорным экраном, которые достаточно велики, чтобы надежно щелкнуть ваше меню. Вы можете сохранить текст того же размера и добавить отступы/маржу, чтобы улучшить качество касания, но это делает это меню даже «большим» рядом с логотипом.

Вместо наименьшего размера попробуйте уложить навигацию под логотипом, а затем, как только изображение будет потеряно по мере увеличения экрана, принесите меню справа от логотипа, как у вас в настоящее время. Это аккуратно обходит вокруг любого текста или масштабирования изображения, одновременно улучшая ваш дизайн для небольших устройств.

I put together a demo for you. Обязательно просмотрите полный просмотр, чтобы вы могли изменять размер и видеть новое поведение в меню.

Вы можете использовать любой шаблон, который вы хотите, при минимальном размере, я пошел с простым уложенным рисунком, потому что ваше меню легко вписывается в одну строку. Если бы у вас было больше элементов навигации в будущем, вы могли бы сделать аккордеон или даже перейти к офлайновому подходу.

Дополнительная информация: Оформить заявку Chris Coyier's post на изготовление планшетов, дружественных к делу, некоторые отличные подсказки.

Кроме того, ознакомьтесь с Trent Walton's short post о типе и касании.