Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11679
Последний выпуск: 19.06.2015

Проблемы с адаптивной вёрсткой

1.8K
09 октября 2014 года
trivium
128 / / 31.01.2010
Начал осваивать адаптивную вёрстку и пытаюсь сделать сайт, который будет подстраиваться под любое разрешение экрана и тянуть/сжимать все элементы соответственно, но почему-то все тексты, заголовки и картинки всегда одного и того же размера и не тянутся вообще.
Пытаюсь сделать тянущийся логотип в шапке таким образом:
 
Код:
<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">
В чём может быть проблема?
4
09 октября 2014 года
mike
3.7K / / 01.10.2002
А кто сказал что em тянется? Для шрифта рекомендую использовать css conditional formatting:

Код:
@media (min-width: 768px) {
    .text {font-size:10px;}
}
@media (min-width: 992px) {
    .text {font-size:11px;}
}
@media (min-width: 1200px) {
    .text {font-size:12px;}
}
@media (min-width: 1300px) {
    .text {font-size:14px;}
}
1.8K
09 октября 2014 года
trivium
128 / / 31.01.2010
А что разве em не тянет? Везде пишут он относительный даёт размер шрифта. И как с изображениями быть, чтобы они тянулись и выглядели на всех разрешениях одинаково?
1.8K
11 октября 2014 года
trivium
128 / / 31.01.2010
em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана?
4
12 октября 2014 года
mike
3.7K / / 01.10.2002
Цитата: trivium
em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана?

Через css conditional formatting. Пример был выше.

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог