Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблемы с адаптивной вёрсткой

Автор: kaktebe 9.10.2014, 02:20

Начал осваивать адаптивную вёрстку и пытаюсь сделать сайт, который будет подстраиваться под любое разрешение экрана и тянуть/сжимать все элементы соответственно, но почему-то все тексты, заголовки и картинки всегда одного и того же размера и не тянутся вообще.
Пытаюсь сделать тянущийся логотип в шапке таким образом:

Код


<div id="menu">
    <a href="link" class="lefttopmenu">Ссылка</a>
    <a href="link" class="lefttopmenu">Ссылка</a>
    <a href="link" class="lefttopmenu">Ссылка</a>
    <a href="link" id="logolink"><img src="/images/logo.png" id="logoimg" /></a>
    <input type="text" id="searchinpt" placeholder="Поиск" class="righttopmenu" />
    <a href="link" class="righttopmenu">Контакты</a>
    <a href="/news" class="righttopmenu">Новости</a>
</div>

CSS для блока:

Код


.lefttopmenu
{
    font-size:1.2em;
    float:left;
    margin-left:5%;
    font-weight:bold;
}

.righttopmenu
{
    font-size:1.2em;
    float:right;
    margin-right:5%;
}

#menu
{
    width:100%;
    height:6%;
    padding-top:1%;
}

#menu a
{
    display:block;
    text-decoration:none;
    color:#1a1a18;
}

#logoimg
{
    width:15%;
}

Т.е. делаю лого шириной 15%, лого само тянется, если увеличивать ширину, так же само изображение большого размера и должно тянуться, но при этом при изменении разрешения экрана или на сайтах позволяющих посмотреть сайт в разных разрешениях размер остаётся тот же. И размер шрифта не меняется, хотя он задан в em. Но при этом отступы в процентах срабатывают нормально и тянутся.

В meta прописано

Код


<meta name="viewport" content="width=device-width, initial-scale=1.0">

В чём может быть проблема?

Автор: kaktebe 11.10.2014, 01:00

em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана?